Flexbox заполняет свободное пространство по вертикали

Теперь в строке flexbox я могу написать

<div layout="row">
  <div>some content</div>
  <div flex></div> <!-- fills/grows available space -->
  <div>another content</div>
</div>

Я хотел бы добиться того же, но вертикально, как на этой картинке . В настоящее время проблема в том, что div, который должен был бы расти, не имеет никакой высоты, поэтому два содержимого находятся ниже друг друга. Я хочу, чтобы мой второй контент находился внизу родительского контейнера с фиксированной высотой!

Я знаю, что мог бы решить эту проблему, поместив второй абсолютный и bottom: 0; контент bottom: 0; но могу ли я добиться этого с flexbox?

Ответ 1

Поэтому вы можете попробовать следующее:

flex-direction: column для гибкого контейнера.
flex: 1 для элемента, который должен заполнить оставшееся пространство.

См. Демо ниже, где flexbox охватывает высоту видового экрана:

body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}
.row, .row > * {
  border: 1px solid;
}

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>

Ответ 2

Вам просто нужно использовать flex-direction: column on parent и flex: 1 на среднем div.

body,
html {
  padding: 0;
  margin: 0;
}
.row {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.row > div:not(.flex) {
  background: #676EE0;
}
.flex {
  flex: 1;
  background: #67E079;
}

<div class="row">
  <div>some content</div>
  <div class="flex"></div>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>