Como posso saber se uma linha de layout flexbox consome o espaço vertical restante em uma janela do navegador?
Eu tenho um layout de flexbox de 3 linhas. As duas primeiras linhas têm altura fixa, mas a terceira é dinâmica e gostaria que aumentasse até a altura total do navegador.
Eu tenho outro flexbox na linha 3 que cria um conjunto de colunas. Para ajustar adequadamente os elementos dentro dessas colunas, preciso que eles entendam a altura total do navegador - para coisas como cor de fundo e alinhamentos de itens na base. O layout principal seria basicamente semelhante a este:
.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>Eu tentei adicionar um heightatributo, que funciona quando eu o configuro como um número fixo, mas não quando o configuro como 100%. Eu entendo que height: 100%não está funcionando, porque o conteúdo não está preenchendo a janela do navegador, mas posso replicar a ideia usando o layout flexbox?