¿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

Respuestas:

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