Flex box: заполнить оставшееся пространство, но выровнять центр контента

Question

Я хочу создать макет, похожий на следующий:

Другими словами, последний элемент занимает «оставшееся пространство», что остальные элементы центрированы , как если бы элемент 3 был равного размера для элементов 1 и 2. Самое близкое, что я могу получить к этому, это расположение:

Я также пытался установить height: 100% для последнего элемента, что, конечно, не работает, так как это подталкивает пункты 1 и 2 к вершине. Вот фрагмент, который я не знаю, как закончить:

/* Default values are skipped */
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item {
   background: red;
}

.item-fill {
   background: yellow;
   /* What should go in here? */
}

<div class="container">
  <div class="item">
  First item
  </div>
  <div class="item">
  Second item
  </div>
    <div class="item-fill">
  Third item which should fill up the rest of the parent space without pushing the first and second item upwards
  </div>
</div>

Может быть, это не может быть решено с помощью одного flex-box и требует взлома, но я был бы благодарен тому, кто бы мог предложить самое простое решение.

Спасибо.

Answer 1

Просто добавьте псевдоэлемент со значением flex-grow: 1; (перед другими элементами в вашем контейнере) и установите такое же значение flex-grow на .item-fill.

Псевдоэлемент (.container:before здесь) заполнит верхнюю часть контейнера настолько, насколько это возможно, а другой элемент со значением flex-grow заполнит остальную часть. Два других элемента будут такими же маленькими, как и их содержимое.

/* Default values are skipped */

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container:before {
    content: "";
}

.container:before,
.item-fill {
    flex: 1;
}

.item {
   background: red;
}

.item-fill {
   background: yellow;
}

<div class="container">
  <div class="item">
  First item
  </div>
  <div class="item">
  Second item
  </div>
    <div class="item-fill">
  Third item which should fill up the rest of the parent space without pushing the first and second item upwards
  </div>
</div>

Answer 2

Попробуйте с flex-grow для вашего item-fill класса.

Свойство flex-grow указывает, насколько элемент будет расти относительно остальных гибких элементов внутри того же контейнера.

* {
    box-sizing: border-box;
    position: relative;
}

.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.item {
    background: red;
}

.item-fill {
    background: yellow;
    display: flex;
    flex-grow: 1;
}

<div class="container">
    <div class="item">
        First item
    </div>
    <div class="item">
        Second item
    </div>
    <div class="item-fill">
        Third item which should fill up the rest of the screen space without pushing the first and second item upwards
    </div>
</div>