Как растянуть дочерний элемент Flex для заполнения высоты контейнера

При работе с Flexbox часто возникает проблема, когда дочерний элемент не растягивается на всю высоту контейнера. Часто это происходит из-за неправильного использования свойства height: 100%.

Во Flexbox свойство height: 100% может быть проблематичным, потому что:

• Родительский элемент требует фиксированного height, что противоречит принципам Flexbox.
• Когда присутствует несколько дочерних элементов, использование height: 100% для одного дочернего элемента будет игнорировать другие.

Решение состоит в том, чтобы удалить свойство height: 100% и полагаться на поведение Flexbox по умолчанию. По умолчанию элементы сгибаются в направлении строки (типичный макет) выравниваются по вертикали с помощью свойства align-items:stretch. Это означает, что дочерний элемент автоматически растянется, чтобы заполнить доступную высоту контейнера.

Вот пример, демонстрирующий правильное использование без высоты: 100%:

  

  

    some

    cool

    text
  

В этом примере желтый дочерний элемент растянется до высоты контейнера, независимо от высоты текста синего дочернего элемента. Это связано с тем, что значение align-items:stretch по умолчанию гарантирует, что гибкие элементы растягиваются по вертикали, чтобы занять доступное пространство.