Как только не извращались раньше верстальщики для выравнивания высоты элементов. Некоторые применяли для этого даже JavaScript. Но потом появились флексбоксы, которые сильно упростили жизнь верстальщиков. Но и по флексам все же иногда возникают вопросы.
Итак, первое, что приходит в голову для решения задачи: использовать для FLEX‑контейнера align-items: center. И это правильно, но тогда высота вложенных элементов будет разной.
See the Pen Выровнять высоту и центрировать по вертикали элементы во FLEX‑контейнере — 1 by Ivan (@DanilinBiz) on CodePen.
А нам нужна единая растягивающаяся высота: align-items: stretch.
Естественно, align-items не может быть одновременно center и stretch.
Как быть?
Решение простое: делаем вложенные элементы резиновыми и тоже флексбоксами, а внутри них уже все центрируем по вертикали.
Должно получиться примерно так:
See the Pen Выровнять высоту и центрировать по вертикали элементы во FLEX‑контейнере — 2 by Ivan (@DanilinBiz) on CodePen.
Задача решена.