Як розтягнути дітей на заповнення поперечної осі?

141

У мене лівий-правий флексбокс:

.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

Так, висота обгортки з якихось причин не заповнена сафарі ... хром і фаєрфокс роблять це чудово, встановлюючи висоту: '100%' у дітей

— Pencilcheck

175

Діти контейнера з рядком-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;.

— Rory O'Kane

Здається align-items: stretch;, не потрібно

— Метт