title: Content of horizontal scroll div is cut
body: <p>I am inserting into my HTML using javascript. My code is being truncated/ cut off.</p>
  
  <p>Here's my code:  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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));
    });
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="küchen_co center"&gt;
  
    &lt;div class="küchen_feedback_p center" id="küchen_feedback_p" style="display: none;"&gt;
  
    &lt;/div&gt;
  
    &lt;div class="noDataContainer_kfeedback_p" id="noDataContainer_kfeedback_p" style="text-align:center;"&gt;
      &lt;img src="./broken_heart.png" width="80px" height="auto" /&gt;
      &lt;p class="nothing_found_k küchenH"&gt;Es wurden derzeit keine Feedbacks abgesendet.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="feedback_container" id="feedbackDiv" style="width:300px; height: 250px; margin-right: 20px;"&gt;
    &lt;p id="feedback_id" style="display: none;"&gt;${feedback_id}&lt;/p&gt;
    &lt;h1 class="" style="word-wrap: break-word;"&gt;${feedback_title}&lt;/h1&gt;
    &lt;p class="" style="word-wrap: break-word;"&gt;${feedback_content}&lt;/p&gt;
    &lt;p class="" id="feedback_author" style="display: none;"&gt;${feedback_author}&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the content of the scrolling div is cutted:  <a href="https://www.dropbox.com/s/8f95tjojkbpku35/scroll.PNG?dl=0" rel="nofollow noreferrer">https://www.dropbox.com/s/8f95tjojkbpku35/scroll.PNG?dl=0</a><br>
  ~filip</p>