title: HTML flex box layout - scrolled element won't stretch
body: <p>I'm trying to create a layout that looks something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/rbajC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rbajC.png" alt="enter image description here"></a></p>
  
  <p>Where the header and footer are pinned to the window and the blue area scrolls vertically if it needs space. </p>
  
  <p>I thought <code>display:flex</code> would do it, and the code below gets close, but there is a problem. If you scroll that content area, it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/v04RI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v04RI.png" alt="enter image description here"></a></p>
  
  <p>It appears that the divs for the "left nav" and "content" are chopped to the height of the their parent, even though that parent is scrollable.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var linesToAdd = 100;
  var html = "";
  for (var i=0; i&lt;linesToAdd; i++) {
     html += i + "&lt;br/&gt;"
  }
  document.getElementById('content').innerHTML = html;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    height: 100%;
  }
  body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height:100%
  }
  #header, #footer {
    background: #ffa0a0;
    flex-shrink:0;
  }
  #mid {
    flex-grow: 1;
    background: #a08080;
    overflow-y: scroll;
    display: flex;
  }
  #leftnav {
    padding: 10px;
    background: #8a8;
  }
  #content {
    background: #88a;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;body&gt;
    &lt;div id="header"&gt;Header&lt;/div&gt;
         
    &lt;div id='mid'&gt;
      &lt;div id='leftnav'&gt;Left nav&lt;/div&gt;
      &lt;div id='content'&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="footer"&gt;Footer&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, I can modify that slightly to make it work when the content is overflowing, but then it doesn't work when the content is smaller.  I'm looking for something that stretches vertically to the footer, when content is small, but overflows without chopping the backgrounds when content is large.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// With 100 here it looks good, but with 5, you see it doesn't stretch vertically.
  var linesToAdd = 5;
  var html = "";
  for (var i=0; i&lt;linesToAdd; i++) {
     html += i + "&lt;br/&gt;"
  }
  document.getElementById('content').innerHTML = html;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    height: 100%;
  }
  body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height:100%
  }
  #header, #footer {
    background: #ffa0a0;
    flex-shrink:0;
  }
  #mid {
    flex-grow:1;
    background:#a88;
    overflow-y:scroll;
  }
  #leftnav {
    padding: 10px;
    background: #8a8;
  }
  #content {
    background: #88a;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;body&gt;
    &lt;div id="header"&gt;Header&lt;/div&gt;
         
    &lt;div id='mid' style=""&gt;
      &lt;div style="display:flex"&gt;
        &lt;div id='leftnav'&gt;Left nav&lt;/div&gt;      
        &lt;div id='content'&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="footer"&gt;Footer&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>