estirando el niño flexible para llenar la altura del contenedor sin la altura de los padres explícitos

[&]] en situaciones en las que necesitamos estirar un niño flexible para llenar toda la altura del contenedor, asegurando el comportamiento del padre depende de los contenidos de otro niño ". Flexbox.

por qué usar "altura: 100%" puede romper flexbox

cuando usa "altura: 100%" en flexbox:

• el padre del elemento que se estira requiere una altura declarada, que va contra el comportamiento predeterminado de FlexBox. "Altura: 100%" ignorará su presencia y conducirá a conflictos.

para lograr el estiramiento deseado sin romper Flexbox, simplemente eliminar "Altura: 100%" del niño del niño "del niño" elemento.

en flexbox con dirección de fila (el valor predeterminado), la propiedad "alinearse" controla el comportamiento vertical. Su configuración predeterminada es "estirarse", haciendo que los elementos flexibles se estire automáticamente para llenar la altura disponible, siempre que el padre no tenga una altura explícita establecida.

considere el siguiente código de código:

 En este ejemplo, el niño amarillo se estirará para llenar toda la altura de su padre, mientras que la altura de los padres se ajustará automáticamente en función del contenido de texto del niño azul.