Как растянуть детей, чтобы заполнить поперечные оси?

141

У меня есть левый-правый flexbox:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Развернуть фрагмент

Проблема в том, что правильный ребенок не ведет себя отзывчиво. Чтобы быть конкретным, я хочу, чтобы он заполнял высоту оболочки.

Как это сделать?

css flexbox Дебора Коул
источник

это действительно заполняет высоту обертки! Я тестировал его в Chrome и Firefox, и проблем не было. возможно, вы слишком упростили свой код. вы можете проверить это, установив background-colorдля детей или установив align-items: centerв оболочке.

samad montazeri 01

да, высота обертки не заполняется в сафари по некоторым причинам ... Chrome и Firefox делают это прекрасно, устанавливая высоту: '100%' в дочерних

элементах

Ответы:

175

Потомки контейнера row-flexbox автоматически заполняют вертикальное пространство контейнера.
Укажите flex: 1;для ребенка, если вы хотите, чтобы он заполнял оставшееся горизонтальное пространство:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Развернуть фрагмент

Укажите flex: 1;для обоих дочерних элементов, если вы хотите, чтобы они заполняли равное количество горизонтального пространства:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Развернуть фрагмент

Алекс Шестеров
источник

flexсвойство является обобщающим для flex-grow, flex-shrinkи flex-basis. flex: 1;эквивалентно flex-grow: 1;.

Рори О'Кейн

Вроде align-items: stretch;не нужно

Мэтт