I have a layout like this:
<div class="flexbox">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
and css for it:
html,
body {
height: 100%;
}
.flexbox {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
height: 100%;
width: 100%;
}
.flexbox .main {
order: 0;
flex: 1 1 auto;
align-self: stretch;
}
.flexbox .header,
.flexbox .footer {
order: 0;
flex: 0 1 auto;
align-self: stretch;
}
in the above .main column is stretched 100% height, all this works perfect, now adding .flexbox-row inside .main:
<div class="flexbox">
<div class="header"></div>
<div class="main">
<div class="flexbox-row">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
<div class="footer"></div>
</div>
and css:
.flexbox-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
}
.flexbox-row .first,
.flexbox-row .second,
.flexbox-row .third {
order: 0;
flex: 0 1 auto;
align-self: stretch;
}
.flexbox-row .second {
order: 0;
flex: 1 1 auto;
align-self: stretch;
}
but for some reason .main column the second one does not stretch 100% in height anymore.
Here is jsbin demo
1 Answer
Add height:100% to .flexbox-row
I've simplified your rules, there were unnecessary properties there.
html,
body {
height: 100%;
margin: 0
}
.flexbox {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 100%;
width: 100%;
}
.flexbox .main {
flex: 1;
background: red
}
.flexbox .header,
.flexbox .footer {
background: green;
padding:1em
}
.flexbox-row {
display: flex;
height: 100%;
}
.flexbox-row .first,
.flexbox-row .second,
.flexbox-row .third {
background: #C9E1F4;
padding: 1em;
}
.flexbox-row .second {
flex: 1;
background: #A8EDAC
}<div class="flexbox">
<div class="header">Header</div>
<div class="main">
<div class="flexbox-row">
<div class="first">First</div>
<div class="second">Main</div>
<div class="third">Third</div>
</div>
</div>
<div class="footer">Footer</div>
</div>UPDATE
In Chrome and Safari, the height of (non flex) children are not recognized in percentages. However Firefox and IE recognize and scale the children based on percentage heights.
So a workaround for that is adding .position:relative to .main and position:absolute, width/height:100% to .flexbox-row
html,
body {
height: 100%;
margin: 0
}
.flexbox {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 100%;
width: 100%
}
.flexbox .main {
flex: 1;
background: red;
position: relative
}
.flexbox .header,
.flexbox .footer {
background: green;
padding: 1em
}
.flexbox-row {
display: flex;
position:absolute;
height: 100%;
width: 100%
}
.flexbox-row .first,
.flexbox-row .second,
.flexbox-row .third {
background: #C9E1F4;
padding: 1em;
}
.flexbox-row .second {
flex: 1;
background: #A8EDAC
}<div class="flexbox">
<div class="header">Header</div>
<div class="main">
<div class="flexbox-row">
<div class="first">First</div>
<div class="second">Main</div>
<div class="third">Third</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
