Content of horizontal scroll div is cut

Question

I am inserting into my HTML using javascript. My code is being truncated/ cut off.

Here's my code:

 function feedbackDiv(feedback_id, feedback_title, feedback_content, feedback_author) { return querySnapshot.forEach(function(doc) { const data = doc.data(); var feedback_title = data.title; var feedback_content = data.content; var feedback_author = data.author; document.getElementById("küchen_feedback_p").insertAdjacentHTML('beforeend', feedbackDiv(doc.id, feedback_title, feedback_content, feedback_author)); }); }; 

 .küchen_co { padding: 20px; } .küchen_feedback_p { overflow-x: auto; } .feedback_container { padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; background-color: #212121; color: #ffffff; text-align: center; } .feedback_container:hover { border: 1px solid #7ef6a9; animation: color_change 1s; background-color: #7ef6a9; color: #212121; } 

 <div class="küchen_co center"> <div class="küchen_feedback_p center" id="küchen_feedback_p" style="display: none;"> </div> <div class="noDataContainer_kfeedback_p" id="noDataContainer_kfeedback_p" style="text-align:center;"> <img src="./broken_heart.png" width="80px" height="auto" /> <p class="nothing_found_k küchenH">Es wurden derzeit keine Feedbacks abgesendet.</p> </div> </div> <div class="feedback_container" id="feedbackDiv" style="width:300px; height: 250px; margin-right: 20px;"> <p id="feedback_id" style="display: none;">${feedback_id}</p> <h1 class="" style="word-wrap: break-word;">${feedback_title}</h1> <p class="" style="word-wrap: break-word;">${feedback_content}</p> <p class="" id="feedback_author" style="display: none;">${feedback_author}</p> </div> 

But the content of the scrolling div is cutted: https://www.dropbox.com/s/8f95tjojkbpku35/scroll.PNG?dl=0
~filip

Answer 1

For all with further issues. The problem might be the following lines of code:

justify-content: center;
  align-items:center;
  text-align:center;