[css] Altura 100% en la columna de flexbox niño



Answers

Question

Esta pregunta ya tiene una respuesta aquí:

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




Related