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

Пользователь

от elda , в категории: HTML/CSS , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от edyth , год назад

@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% высоты родительского элемента с возможностью прокрутки, если содержимое контейнера превышает высоту экрана.

Пользователь

от brooklyn , 7 дней назад

@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;
}


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