Flexbox height Constraint 100% of available space

Question

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 Fiddle.

The fiddle uses the following line to calculate the available space.

height: calc(100vh - 4em);

This is a problem because a) the header isn't always 4em, and b) vh doesn't take scroll bars into account.

* {
  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;
}

<div class="header">
  I'm a header
</div>
<div class="flex-container">
  <div class="column">
    Some content
  </div>
  <div class="column">
    more content
  </div>
  <div class="column">
    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
  </div>
  <div class="column">

  </div>
  <div class="column">
    Some content
  </div>
</div>

Answer 1

you don't need to use calc function. when you have a flex container if one of its children doesn't have flex property, it will only fill the area it needs then if next child has flex:1 it will fill the remaining area.

.container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: green
}
.content{
    flex: 1;
    background: red
}

<div class="container">
    <div>Header here</div>
    <div class="content">Content here</div>
</div>

Answer 2

One of the reasons to use flex is to not specify fixed dimensions. flex: 1 (or flex-shrink, flex-grow, flex-basis) can be used to fill available width or height:

.container {
  display: flex;
  flex-direction: column;
  
  /* for demo purposes */
  height: 300px;
  border: 1px solid red;
}

header {
  padding: 20px;
}

.content {
  flex: 1;
  background-color: #f0f0f0;
}

<div class="container">
  <header>Header of any height</header>
  <div class="content">Content which fills remaining height</div>
</div>

So you should wrap your header and content in a flex container and set the content to flex: 1: https://jsfiddle.net/j4sLgh0o/

Answer 3

You don't need a fixed height or calc(). Flex properties are good enough (plus a minor hack for the scroll function to activate in Edge and Firefox).

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

header {
  flex: 0 0 4em; /* flex-basis can be anything */
  background-color: lightgreen;
}

.flex-container {
  display: flex;
  background: #CCCCCC;

 /* for Edge and FF */
  height: 1px; /* these browsers won't trigger an overflow without a fixed height */
  flex-grow: 1;
}

.column {
  flex: 0 0 9em;
  background: #fff;
  overflow-y: auto;
}


div {
  border: 1px solid #000;
}
* {
  box-sizing: border-box;
}

<header></header>
<div class="flex-container">
  <div class="column">Some content</div>
  <div class="column">more content</div>
  <div class="column">
    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
  </div>
  <div class="column"></div>
  <div class="column">Some content</div>
</div>