Linha Flexbox: como esticar as crianças para preencher o eixo transversal?

Question

Linha Flexbox: como esticar as crianças para preencher o eixo transversal?

tenho uma flexbox esquerda-direita:

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

O problema é que a criança certa não se está a comportar de forma responsável. Para ser específico, quero que preencha a altura do Invólucro. Como conseguir isso?

60

css flexbox

Author: Benjamin, 2015-04-06

Source

2 answers

score 85 · Answer 1

Os filhos de um contentor row-flexbox preenchem automaticamente o espaço vertical do contentor.
Indique flex: 1; para uma criança se quiser que ela preencha o espaço horizontal restante:

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

especifique flex: 1; para ambas as crianças se quiser que elas preencham quantidades iguais do espaço horizontal:

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

score 0 · Answer 2

Enche a altura do Invólucro! testei-o em cromado e Firefox e não houve problema. talvez tenha simplificado demasiado o seu código. pode testar esta opção ajustando {[[0]} para crianças ou ajustando align-items: center em invólucro.