title: How to make a flexbox element fill the remaining space and scroll?
body: <p>I'm trying to have a vertical scrollable div in the remaining space of some elements. None of them have a fixed height.</p>
  
  <p>All I got is a flexbox element that adjusts to its content, but what I really need is that the element fill up the empty space and it's content just scroll there.</p>
  
  <p><a href="http://jsfiddle.net/o7ecr01q/" rel="noreferrer">Code at Fiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="wrapper-1"&gt;
    &lt;div&gt;some stuff&lt;/div&gt;
    &lt;div&gt;some other stuff&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrapper-2"&gt;
    &lt;div&gt;more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more stuff&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrapper-3"&gt;
    &lt;div id="header"&gt;
        &lt;div&gt;My&lt;/div&gt;
        &lt;div&gt;Header than can grow&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
        &lt;div&gt;My Content that will fill remaining space untill page has to scroll&lt;/div&gt;
        &lt;div&gt;My Content that will fill remaining space untill page has to scroll&lt;/div&gt;
        &lt;div&gt;My Content that will fill remaining space untill page has to scroll&lt;/div&gt;
        &lt;div&gt;My Content that will fill remaining space untill page has to scroll&lt;/div&gt;
        &lt;div&gt;My Content that will fill remaining space untill page has to scroll&lt;/div&gt;
        &lt;div&gt;My Content that will fill remaining space untill page has to scroll&lt;/div&gt;
        &lt;div&gt;My Content that will fill remaining space untill page has to scroll&lt;/div&gt;
        &lt;div&gt;My Content that will fill remaining space untill page has to scroll&lt;/div&gt;
        &lt;div&gt;My Content that will fill remaining space untill page has to scroll&lt;/div&gt;
        &lt;div&gt;My Content that will fill remaining space untill page has to scroll&lt;/div&gt;
        &lt;div&gt;My Content that will fill remaining space untill page has to scroll&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html, body {
      margin: 0;
      height: 100%;
  }
  
  .wrapper-1 {
    background: white;
  }
  
  .wrapper-2 {
    background: lime;
  }
  
  .wrapper-3 {
    display: flex;
    flex-direction: column;
  }
  
  #header {
    background: #edc;
    flex: 1 1 40px;
  }
  
  #content {
      flex: 1 1 auto;
      background: yellow;
      overflow: auto;
  }
  
  #content div {
    min-height: 50px;
  }
  </code></pre>
  
  <p>The #content should have the height from the #header to the bottom of the page.</p>
  
  <p>The perfect solution would be using only CSS but an alternative JS solution could help, the thing is that this have to work even when resizing the browser window.</p>