title: Fill remaining vertical space with CSS using display:flex
body: <p>In a 3-row layout:</p>
  <ul>
  <li>the top row should be sized according to its contents</li>
  <li>the bottom row should have a fixed height in pixels</li>
  <li>the middle row should expand to fill the container</li>
  </ul>
  <p>The problem is that as the main content expands, it squishes the header and footer rows:</p>
  <p><img src="https://i.stack.imgur.com/Xwer8.png" alt="Flexing Bad" /></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>section {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    height: 300px;
  }
  header {
    flex: 0 1 auto;
    background: tomato;
  }
  div {
    flex: 1 1 auto;
    background: gold;
    overflow: auto;
  }
  footer {
    flex: 0 1 60px;
    background: lightgreen;
    /* fixes the footer: min-height: 60px; */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;header&gt;
      header: sized to content
      &lt;br&gt;(but is it really?)
    &lt;/header&gt;
    &lt;div&gt;
      main content: fills remaining space&lt;br&gt;
      x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;
      &lt;!-- uncomment to see it break - -&gt;
      x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;
      x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;
      x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;
      x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;
      &lt;!-- --&gt;
    &lt;/div&gt;
    &lt;footer&gt;
      footer: fixed height in px
    &lt;/footer&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Fiddle:</strong></p>
  <ul>
  <li><a href="http://jsfiddle.net/7yLFL/1/" rel="noreferrer">http://jsfiddle.net/7yLFL/1/</a>   (working, with small content)</li>
  <li><a href="http://jsfiddle.net/7yLFL/" rel="noreferrer">http://jsfiddle.net/7yLFL/</a>   (broken, with larger content)</li>
  </ul>
  <p>I'm in the lucky situation that I can use the latest and greatest in CSS, disregarding legacy browsers. I thought I could use the flex layout to finally get rid of the old table-based layouts. For some reason, it's not doing what I want...</p>
  <p>For the record, there are many related questions on SO about &quot;filling the remaining height&quot;, but nothing that solves the problem I'm having with flex. Refs:</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/90178">Make a div fill the height of the remaining screen space</a></li>
  <li><a href="https://stackoverflow.com/questions/23389098">Fill remaining vertical space - only CSS</a></li>
  <li><a href="https://stackoverflow.com/questions/18538536">Have a div to fill out the remaining height/width of a container when sharing it with another div?</a></li>
  <li><a href="https://stackoverflow.com/questions/21222663">Make nested div stretch to 100% of remaining container div height</a></li>
  <li><a href="https://stackoverflow.com/questions/23090136">How can I make my flexbox layout take 100% vertical space?</a></li>
  <li>etc</li>
  </ul>