javascript - 水平滚动 div 的内容被剪切

Question

我正在使用 javascript 插入到我的 HTML 中。我的代码被 chop 了。

这是我的代码:

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>

但是滚动div的内容被 chop 了:https://www.dropbox.com/s/8f95tjojkbpku35/scroll.PNG?dl=0
~菲利普

Answer 1

对于所有有进一步问题的人。问题可能出在以下代码行:

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