title: Scrollbar above content
body: <p>In the following code, I'm trying to build table like design with flexbox display model.</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>.wrapper {
      width: 500px;
      height: 150px;
      background: grey;
  }
  .container {
      display: flex;
      flex-direction: column;
      height: 100%;
  }
  .row {
      display: flex;
      flex-direction: row;
      flex: 1;
      border: 3px solid green;
  }
  .cell {
      flex: 1;
      border: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell"&gt;1&lt;/div&gt;
        &lt;div class="cell"&gt;2&lt;/div&gt;
        &lt;div class="cell"&gt;3&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row" style="overflow: auto;"&gt;
        &lt;div class="cell"&gt;1&lt;/div&gt;
        &lt;div class="cell"&gt;
          &lt;div style="height: 200px;"&gt;huge content&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="cell"&gt;3&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell"&gt;1&lt;/div&gt;
        &lt;div class="cell"&gt;2&lt;/div&gt;
        &lt;div class="cell"&gt;3&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My problem is, that in second row (with that "huge content") is scrollbar, and that scrollbar is taking space from my row cells and that's huge problem because my columns don't have the same width and it doesn't look like a table.</p>
  
  <p>Things I can't use:</p>
  
  <ul>
  <li>my own implementation of scrollbars (performance is an issue).</li>
  <li>fixed widths of columns or <code>.container</code> (components height and width has to adapt).</li>
  </ul>
  
  <p><a href="https://drive.google.com/file/d/0B6QwWVutfGaEZTl3bXBmUFF2UjA/edit?usp=sharing" rel="noreferrer">Real world usage of component</a></p>
  
  <p>So, I need to make the scrollbar in the second row to be above that content and not to take that space.</p>