Como esticar as crianças para preencher o eixo transversal?

141

Eu tenho um flexbox esquerdo-direito:

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

Expandir snippet

O problema é que a criança certa não está se comportando de maneira responsiva. Para ser específico, quero que ele preencha a altura do invólucro.

Como conseguir isso?

css flexbox Deborah Cole
fonte

preenche a altura do invólucro! Eu testei no Chrome e Firefox e não houve problema. talvez você tenha simplificado demais o seu código. você pode testar isso configurando background-colorpara crianças ou configurando align-items: centerno wrapper.

samad montazeri

sim, a altura da embalagem não foi preenchido no safari por algumas razões ... Chrome e Firefox faz isso muito bem, definindo altura: '100%' nas crianças

Pencilcheck

Respostas:

175

Os filhos de um contêiner de linhas e caixas flexíveis preenchem automaticamente o espaço vertical do contêiner.
Especifique flex: 1;para um filho se você deseja preencher 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>

Expandir snippet

Especifique flex: 1;para os dois filhos, se desejar que eles 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>

Expandir snippet

Alex Shesterov
fonte

flexé uma propriedade estenográfica para flex-grow, flex-shrink, e flex-basis. flex: 1;é equivalente a flex-grow: 1;.

Rory O'Kane

Parece que align-items: stretch;não é necessário

Matt