Come allungare i bambini per riempire l'asse trasversale?

141

Ho un flexbox sinistro-destro:

.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>

Espandi frammento

Il problema è che il bambino giusto non si sta comportando in modo reattivo. Per essere precisi, voglio che riempia l'altezza dell'involucro.

Come realizzare questo?

css flexbox

— Deborah Cole
fonte

riempie l'altezza dell'involucro! l'ho provato su Chrome e Firefox e non ci sono stati problemi. forse hai semplificato troppo il tuo codice. puoi testarlo impostando background-colorper i bambini o impostando align-items: centerin wrapper.

— Samad Montazeri,

sì, l'altezza dell'involucro non è riempita in safari per alcuni motivi ... Chrome e Firefox lo fanno bene impostando l'altezza: "100%" nei bambini

— Pencilcheck

175

I figli di un contenitore row-flexbox riempiono automaticamente lo spazio verticale del contenitore.
Specificare flex: 1;per un bambino se si desidera riempire lo spazio orizzontale rimanente:

.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>

Espandi frammento

Specificare flex: 1;per entrambi i bambini se si desidera che riempiano quantità uguali di spazio orizzontale:

.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>

Espandi frammento

— Alex Shesterov
fonte

flexè una proprietà scorciatoia per flex-grow, flex-shrinke flex-basis. flex: 1;è equivalente a flex-grow: 1;.

— Rory O'Kane,

Sembra che align-items: stretch;non sia necessario

— Matt