title: Setting overflow: scroll on a table with display: flex
body: <p>I have a table with the <code>display: flex</code> property, whose cells will be centered vertically. When there are more cells than the table can show, the <code>overflow: scroll</code> property doesn't take the top ones into account.</p>
  
  <p>In the sample code below, the scroll stops at the letter K when it should go all the way up to the letter A. What is causing this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    height: 180px;
    display: flex;
    flex-flow: row;
    align-items: stretch;
    border: 1px dashed gray;
  }
  
  table {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 10px;
    overflow: scroll;
    border: 1px dashed blue;
  }
  
  td {
    height: 10px;
    width: 100px;
    border: 1px solid red;
  }
  
  #container div {
    flex: 1;
    margin: 10px;
    border: 1px dashed red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;B&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;C&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;D&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;E&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;F&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;G&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;H&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;I&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;J&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;K&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;L&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;M&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;N&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;O&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;P&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Q&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;R&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;S&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;T&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;U&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;V&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;W&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Y&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Z&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
    &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;B&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;C&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>