¿Cómo hacer que los niños Flexbox 100% de altura de su padre?

Intento llenar el espacio vertical de un elemento flexible dentro de un flexbox.

.container { height: 200px; width: 500px; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; -moz-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } 
 

Y aquí está el JSFiddle

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

  1. flex-2 tiene 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-child tiene una posición absoluta que también es inconveniente

Esto no funciona en Chrome o Firefox actualmente.

He respondido una pregunta similar aquí .

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

También vea este jsFiddle para una demostración, aunque solo he agregado prefijos de webkit para abrir en Chrome.

Básicamente tienes 2 problemas que trataré por separado.

  1. Conseguir que el niño de un elemento flexible llene altura 100%
    • Establecer position: relative; en el padre del niño.
    • Establecer position: absolute; en el niño
    • Luego puede establecer el ancho / alto según sea necesario (100% en mi muestra).
  2. Corregir el cambio de tamaño de desplazamiento “quirk” en Chrome
    • Poner overflow-y: auto; en el div desplazable
    • El div desplazable debe tener una altura explícita especificada. Mi muestra ya tiene una altura del 100%, pero si ya no se aplica ninguna, puede especificar la height: 0;

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

Si entiendo correctamente, ¿quieres que flex-2-child llene el alto y el ancho de su elemento primario, de modo que el área roja esté completamente cubierta por el verde?

Si es así, solo necesita configurar flex-2 para usar flexbox:

 .flex-2 { display: flex; } 

Luego dígale 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 es.

Al igual que la respuesta de David Storey, mi trabajo es:

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

Alternativamente para align-items , puede usar .flex-2-child align-self solo en el elemento .flex-2-child que desea estirar.

Supongo que el comportamiento de Chrome es más consistente con las especificaciones de CSS (aunque es menos intuitivo). Según la especificación de Flexbox, el valor de stretch predeterminado de align-self propiedad Align align-self cambia solo el valor utilizado de la “propiedad de tamaño cruzado” del elemento ( height , en este caso). Y, según entiendo la especificación CSS2.1 , las alturas porcentuales se calculan a partir del valor especificado de la height , no su valor utilizado. El valor especificado de la height no se ve afectado por ninguna propiedad flexible y sigue siendo auto .

Configuración de height: 100% explícita height: 100% hace que sea formalmente posible calcular el porcentaje de altura del niño, al igual que establecer la height: 100% a html hace posible calcular el porcentaje de altura del body en CSS2.1.

html

 

css

 .container { height: 200px; width: 500px; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-1 { flex:1 0 100px; background-color: blue; } .flex-2 { -moz-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1 0 100%; background-color: red; } .flex-2-child { flex: 1 0 100%; height:100%; background-color: green; } 

http://jsfiddle.net/2ZDuE/750/

Una idea sería esa display:flex; con flex-direction: row; está llenando el container div con .flex-1 y .flex-2 , pero eso no significa que .flex-2 tenga una height:100%; predeterminada height:100%; incluso si se extiende a la altura completa y para tener un elemento hijo ( .flex-2-child ) con height:100%; deberás configurar el padre en height:100%; o use display:flex; con flex-direction: row; en el div .flex-2 también.

Por lo que sé display:flex no ampliará la altura de todos los elementos secundarios al 100%.

Una pequeña demostración, eliminó la altura de .flex-2-child y utilizó display:flex; en .flex-2 : http://jsfiddle.net/2ZDuE/3/

Encontré la solución yo solo, supongamos que tienes 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á, entonces lo que hago es establecer la regla del margin-bottom en auto , como:

 .child { margin-bottom: auto; } 

y el niño se alineará con el más alto de los padres, también puede usar la regla de align-self todos modos si lo prefiere.

 .child { align-self: flex-start; } 

Esta es mi solución usando css +

En primer lugar, si el primer hijo (flex-1) debe ser 100px, no debe ser flexible. En CSS +, de hecho, puede establecer elementos flexibles y / o estáticos (columnas o filas) y su ejemplo será tan fácil como esto:

 
100px
flex

contenedor css:

 .container { height: 200px; width: 500px; position:relative; } 

y obviamente incluye css + 0.2 core

escucha el violín