title: Scrollable content in a mixed of table and flexbox layout
body: <p>Please see this <a href="https://jsfiddle.net/2g80r8br/5/" rel="nofollow noreferrer">jsfiddle</a>.</p>
  
  <p>I would like to have the table's 1st column respect its 90% width and have the user scroll left/right through items 1 to 3.  The <code>&lt;td&gt;</code> with "more" should always be displayed and not be part of the scroll.  In other words, I want to make the table's cell scroll.</p>
  
  <p>How can I make the cell scroll its contained flex-box, while leaving the rest of the table static (i.e., not scrolling)?</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-css lang-css prettyprint-override"><code>table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  
  #flex-div {
    display: flex;
    justify-content: space-between;
    max-width: 100%; /* This property is ignored */
  }
  
  .flex-item {
    background-color: beige;
    padding: 30 px;
    text-align: center;
    width: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;trow&gt;
        &lt;th&gt;Header 1&lt;/th&gt;
        &lt;th&gt;Header 2&lt;/th&gt;
      &lt;/trow&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;trow&gt;
        &lt;td style="width: 90%"&gt;
          &lt;div id="flex-div"&gt;
            &lt;div class="flex-item"&gt;1&lt;/div&gt;
            &lt;div class="flex-item"&gt;2&lt;/div&gt;
            &lt;div class="flex-item"&gt;3&lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;more&lt;/td&gt;
      &lt;/trow&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>