You should set height
of html, body, .wrapper
to 100%
(in order to inherit full height) and then just set a flex
value greater than 1
to .row3
and not on the others.
.wrapper, html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
#row1 {
background-color: red;
}
#row2 {
background-color: blue;
}
#row3 {
background-color: green;
flex:2;
display: flex;
}
#col1 {
background-color: yellow;
flex: 0 0 240px;
min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
background-color: orange;
flex: 1 1;
min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
background-color: purple;
flex: 0 0 240px;
min-height: 100%;/* chrome needed it a question time , not anymore */
}
<div class="wrapper">
<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>
EDIT, as mention by @Basj , the code can be shorten . We can also nowdays use grid widely implemented : Below an example with grid for the visitors :
body {
height: 100vh;
display: grid;
grid-template-rows: auto auto 1fr;
margin: 0;
background-color: orange;
grid-template-columns: 240px 1fr 240px;
}
[id^=row]{ grid-column: 1/-1 }
#row1 { background-color: red; }
#row2 { background-color: blue; }
#row3 { background-color: green; }
#col1 { background-color: yellow; }
#col3 { background-color: purple; }
<div id="row1">this is the header</div>
<div id="row2">this is the second line</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>