¿Cómo estirar a los niños para llenar el eje transversal?

141

Tengo una flexbox izquierda-derecha:

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

El problema es que el niño correcto no se comporta de manera receptiva. Para ser específico, quiero que llene la altura del contenedor.

¿Cómo lograr esto?

css flexbox

— Deborah Cole
fuente

¡llena la altura de la envoltura! Lo probé en Chrome y Firefox y no hubo ningún problema. tal vez has simplificado demasiado tu código. puede probar esto configurando background-colorpara niños o configurando align-items: centeren el contenedor.

— samad montazeri

sí, la altura del envoltorio no está llena de safari por algunas razones ... Chrome y Firefox lo hacen muy bien al establecer la altura: '100%' en los niños

— Pencilcheck

175

Los hijos de un contenedor de fila-flexbox llenan automáticamente el espacio vertical del contenedor.
Especifique flex: 1;para un niño si desea que llene el espacio 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 fragmento

Especifique flex: 1;para ambos hijos si desea que llenen cantidades iguales del espacio 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 fragmento

— Alex Shesterov
fuente

flexes una propiedad resumida para flex-grow, flex-shrinky flex-basis. flex: 1;es equivalente a flex-grow: 1;.

— Rory O'Kane

Parece que align-items: stretch;no es necesario

— Matt