title: Flexbox height Constraint 100% of available space
body: <p>I would like a flexbox container to occupy the available space beneath a header container with unknown height. Columns inside the container that exceed the available space should be scrollable. I demonstrated the desired outcome in a <a href="https://jsfiddle.net/muenpkhv/1/" rel="nofollow noreferrer">Fiddle</a>.</p>
  
  <p>The fiddle uses the following line to calculate the available space.</p>
  
  <pre><code>height: calc(100vh - 4em);
  </code></pre>
  
  <p>This is a problem because a) the header isn't always 4em, and b) vh doesn't take scroll bars into account.</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>* {
    box-sizing: border-box;
  }
  
  div {
    border: 1px solid #000;
  }
  
  .header {
    background: #ededed;
  }
  
  .flex-container {
    display: flex;
    background: #CCC;
    height: calc(100vh - 3em);
    /* remove line to see outcome w/o sketchy calculation */
  }
  
  .column {
    min-width: 9em;
    width: 9em;
    background: #fff;
    overflow-y: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
    I'm a header
  &lt;/div&gt;
  &lt;div class="flex-container"&gt;
    &lt;div class="column"&gt;
      Some content
    &lt;/div&gt;
    &lt;div class="column"&gt;
      more content
    &lt;/div&gt;
    &lt;div class="column"&gt;
      So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content
      it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable
      So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more
      content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's
      unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable
      So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more
      content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's
      unbelievable So much more content it's unbelievable So much more content it's unbelievable So much more content it's unbelievable
    &lt;/div&gt;
    &lt;div class="column"&gt;
  
    &lt;/div&gt;
    &lt;div class="column"&gt;
      Some content
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>