Высота Flexbox Ограничение 100% доступного пространства

Question

Я бы хотел, чтобы контейнер flexbox занимал доступное пространство под контейнером заголовка с неизвестной высотой.Столбцы внутри контейнера, которые превышают доступное пространство, должны прокручиваться.Я продемонстрировал желаемый результат в Fiddle .

Fiddle использует следующую строку для вычисления доступного пространства.

height: calc(100vh - 4em);

Это проблема, потому что a)заголовок не всегда 4em, и b) vh не учитывает полосы прокрутки.

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

Вам не нужна фиксированная высота или calc(). Свойства Flex достаточно хороши (плюс небольшой хак для активации функции прокрутки в Edge и 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>

Answer 2

вам не нужно использовать функцию calc.если у вас есть flex-контейнер, если у одного из его дочерних элементов нет свойства flex, он будет заполнять только ту область, которая ему нужна, тогда, если у следующего дочернего элемента есть flex: 1, он будет заполнять оставшуюся область.

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

Одна из причин использования flex - не указывать фиксированные размеры.flex: 1 (или flex-shrink, flex-grow, flex-basis) можно использовать для заполнения доступной ширины или высоты:

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

Таким образом, вы должны поместить заголовок и содержимое в гибкий контейнер и установить для содержимого flex: 1: https://jsfiddle.net/j4sLgh0o/