¿Cómo puedo hacer que los niños de Flexbox tengan el 100% de la altura de sus padres?

Resuelto Raz asked hace 11 años • 14 respuestas

Estoy intentando llenar el espacio vertical de un elemento flexible dentro de un Flexbox.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>
Expandir fragmento

Y aquí está el JSFiddle

flex-2-childno llena la altura requerida excepto en los dos casos donde:

  1. flex-2tiene una altura del 100% (lo cual es extraño porque un elemento flexible tiene un 100% de forma predeterminada + tiene errores en Chrome)
  2. flex-2-childtiene una posición absoluta que también es inconveniente

Actualmente, esto no funciona en Chrome o Firefox.

Raz avatar Mar 13 '13 16:03 Raz
Aceptado

Usaralign-items: stretch

Similar a la respuesta de David Storey, mi solución es:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Tenga en cuenta que height: 100%debe eliminarse del componente secundario (ver comentarios).

Alternativamente align-items, puedes usarlo align-selfsolo en el .flex-2-childartículo que deseas estirar.

B T avatar Sep 08 '2015 20:09 B T

Sé que ya has dicho position: absolute;que es un inconveniente, pero funciona. Consulte a continuación para obtener más información sobre cómo solucionar el problema de cambio de tamaño.

Consulte también este jsFiddle para ver una demostración, aunque solo agregué prefijos WebKit para abrir en Chrome.

Básicamente tienes dos cuestiones que trataré por separado.

  1. Conseguir que el hijo de un elemento flexible llene la altura al 100%
  • Establecido position: relative;en el padre del niño.
  • Fijado position: absolute;en el niño.
  • Luego puede establecer el ancho/alto según sea necesario (100% en mi muestra).
  1. Arreglando la "peculiaridad" del desplazamiento de cambio de tamaño en Chrome
  • Ponte overflow-y: auto;el div desplazable.
  • El div desplazable debe tener una altura explícita especificada. Mi muestra ya tiene altura 100%, pero si ya no se aplica ninguna puedes especificarheight: 0;

Consulte esta respuesta para obtener más información sobre el problema del desplazamiento.

Brett Postin avatar Mar 13 '2013 15:03 Brett Postin

Si entiendo correctamente, ¿quieres que flex-2-child llene la altura y el ancho de su padre, de modo que el área roja quede completamente cubierta por el verde?

Si es así, sólo necesita configurar flex-2 para usar Flexbox:

.flex-2 {
    display: flex;
}

Luego dile a flex-2-child que se vuelva flexible:

.flex-2-child {
    flex: 1;
}

Ver http://jsfiddle.net/2ZDuE/10/

La razón es que flex-2-child no es un elemento de Flexbox, pero su padre sí lo es.

David Storey avatar May 27 '2013 10:05 David Storey

Encontré la solución por mi cuenta. Supongamos que tiene el CSS a continuación:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

En este caso, establecer la altura al 100% no funcionará, así que establecí la margin-bottomregla en auto, como:

.child {
  margin-bottom: auto;
}

Y el niño estará alineado con la parte superior del padre.

También puedes usar la align-selfregla de todos modos si lo prefieres:

.child {
  align-self: flex-start;
}
user3896501 avatar May 22 '2018 18:05 user3896501