Come faccio a sapere che una riga di layout flexbox consuma lo spazio verticale rimanente in una finestra del browser?
Ho un layout flexbox a 3 file. Le prime due righe sono ad altezza fissa, ma la terza è dinamica e vorrei che raggiungesse l'altezza completa del browser.
Ho un altro flexbox nella riga 3 che crea un insieme di colonne. Per regolare correttamente gli elementi all'interno di queste colonne, ho bisogno che comprendano l'altezza completa del browser, per cose come il colore di sfondo e gli allineamenti degli elementi alla base. Il layout principale alla fine sarebbe simile a questo:
.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>Ho provato ad aggiungere un heightattributo, che funziona quando l'ho impostato su un numero rigido ma non quando l'ho impostato su 100%. Capisco che height: 100%non funziona, perché il contenuto non riempie la finestra del browser, ma posso replicare l'idea utilizzando il layout flexbox?