Как сделать у flexbox max-height 100% c прокручиванием?

@elda 

Следующий CSS-код позволяет вам сделать контейнер в родительском элементе flexbox с максимальной высотой 100% и добавляет возможность прокручивания контента внутри:

1
2
3
4
5
6
7
8

.parent {
  display: flex;
}

.child {
  max-height: 100%;
  overflow-y: auto;
}

В этом примере .parent является родительским элементом flexbox, а .child является его потомком, у которого установлены свойства max-height: 100% и overflow-y: auto. Они позволяют контейнеру внутри .child занимать 100% высоты родительского элемента с возможностью прокрутки, если содержимое контейнера превышает высоту экрана.

@elda 

Также можно использовать свойство flex: 1 для контейнера .child, чтобы он занимал все доступное пространство по вертикали в родителе flexbox:

1
2
3
4
5
6
7
8
9

.parent {
  display: flex;
}

.child {
  flex: 1;
  max-height: 100%;
  overflow-y: auto;
}

Это также позволит контейнеру занимать все доступное пространство по высоте и добавлять прокручивание в случае, если его содержимое превышает высоту экрана.