title: Flex in scrollable div wrong height
body: <p>I have this flex container which does contain 2 columns. The contents of some of the columns is bigger then the conainers height thus the scrollbar is shown. This is ok.</p>
  
  <p>However, when you scroll down the height of the background of the single columns is only as high as the containers heights and does not fill the entire height (below the top scroll position).</p>
  
  <p>Is there a way to fix this so that the yellow and green background is down to the bottom of the columns?</p>
  
  <p>Here is fiddle:</p>
  
  <pre><code>&lt;div class="outer-container"&gt;
  &lt;div class="column-one"&gt;col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one&lt;/div&gt;
  &lt;div class="column-two"&gt;col two&lt;/div&gt;
  &lt;/div&gt;
  
  .outer-container {
    border: 1px solid blue;
    height: 100px;
    overflow: auto;
    display: flex;
  }
  
  .column-one {
    flex: 0 0 auto;
    width: 80px;
    background: green;
  }
  
  .column-two {
    flex: 1 1 auto;
    background: yellow;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ioma8/Lmo94q6q/4/" rel="nofollow noreferrer">https://jsfiddle.net/ioma8/Lmo94q6q/4/</a></p>