Altura 100% en la columna de flexbox niño

Estoy teniendo problemas con una columna de flexbox en que los elementos secundarios del elemento flexible no responden a la height en porcentajes. Solo he comprobado esto en Chrome y, por lo que entiendo, es solo un problema de Chrome. Aquí está mi ejemplo:

HTML

 

CSS

 .flexbox{ position:absolute; background:black; width:100%; height:100%; display: flex; flex-direction:column; } .flex{ background:blue; flex:1; } .flex-child{ background:red; height:100%; width:100%; display:block; } .static{ background:green; width:100%; height:5rem; } 

Aquí está el CodePen.

Lo quiero así que el .flex-child rojo llena el .flex azul. ¿Por qué la height:100% no funciona height:100% ?

TL; DR: configure .flex para display:flex , y elimine la height:100% en .flex-child . Puede ver el CodePen modificado aquí.

Por qué funciona:

Aprendí de esta pregunta similar que, de acuerdo con la especificación de flexbox, un valor de align-self:stretch autoalineado (el valor predeterminado para un elemento flexionado) cambia solo el valor utilizado de la propiedad transversal de un elemento (en este caso, height ) . Sin embargo, los porcentajes se calculan a partir del valor especificado de la propiedad transversal del padre, no de su valor utilizado. Si alguna vez abre su inspector y ve la height:100% en ‘Estilos’ pero height:1200px en ‘Computado’, entonces eso le muestra los valores especificados y utilizados , respectivamente.

Parece que Chrome sigue la especificación al principio a este respecto. Eso significa que establecer la height:100% en .flex-child significa el 100% de la height especificada de .flex . Como no hemos especificado una height en .flex , eso significa que estamos agarrando el 100% de la height predeterminada, que es auto . ¿Ves por qué el motor de diseño se está confundiendo?

Configuración de .flex para display:flex y eliminación de la height:100% de .flex-child (para que no siga intentando establecer el 100% de auto ) hará que .flex-child complete todos los .flex

Cuando esto no funcione:

Esto no funcionará si estás tratando de llenar solo algunos de .flex , ej. tratando de establecer .flex-child a la height:90% , porque flexionar al niño significa que va a llenar todo el espacio disponible. Pensé que podrías piratearlo con posicionamiento absoluto, pero eso tampoco parece funcionar. Puede hackear agregando un segundo hijo a .flex que llamaremos .spacer y estableciendo .spacer en flex:1 y .flex-child en flex:9 (asegúrese de establecer flex-direction:column en .flex también ) Un truco, pero la única forma en que podría arreglarlo. Aquí está el CodePen.

Sin embargo, afortunadamente no tenemos que seguir confiando en esto y simplemente cambiarán las especificaciones para que actúen más de lo esperado.

    Intereting Posts