css - start - flex-grow

Altura 100% en la columna de flexbox niño

Question

Esta pregunta ya tiene una respuesta aquí:

• cómo hacer que las flexboxes anidadas funcionen 3 respuestas

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

<div class=''flexbox''>
  <div class=''flex''>
    <div class=''flex-child''></div>
  </div>
  <div class=''static''></div>
</div>

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% ?

Answer 1

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.