¿Cómo puedo saber que una fila de diseño de caja flexible consume el espacio vertical restante en una ventana del navegador?
Tengo un diseño de caja flexible de 3 filas. Las dos primeras filas son de altura fija, pero la tercera es dinámica y me gustaría que creciera hasta la altura completa del navegador.
Tengo otra caja flexible en la fila 3 que crea un conjunto de columnas. Para ajustar correctamente los elementos dentro de estas columnas, necesito que comprendan la altura completa del navegador, para cosas como el color de fondo y las alineaciones de los elementos en la base. El diseño principal finalmente se parecería a esto:
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
//height: 1000px;
}
.vwrapper #row1 {
background-color: red;
}
.vwrapper #row2 {
background-color: blue;
}
.vwrapper #row3 {
background-color: green;
flex 1 1 auto;
display: flex;
}
.vwrapper #row3 #col1 {
background-color: yellow;
flex 0 0 240px;
}
.vwrapper #row3 #col2 {
background-color: orange;
flex 1 1;
}
.vwrapper #row3 #col3 {
background-color: purple;
flex 0 0 240px;
}<body>
<div class="vwrapper">
<div id="row1">
this is the header
</div>
<div id="row2">
this is the second line
</div>
<div id="row3">
<div id="col1">
col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col3
</div>
</div>
</div>
</body>Intenté agregar un heightatributo, que funciona cuando lo configuro en un número fijo pero no cuando lo configuro en 100%. Entiendo height: 100%que no funciona, porque el contenido no llena la ventana del navegador, pero ¿puedo replicar la idea usando el diseño de flexbox?