I'm trying to get a flexbox working inside a flexbox. While the first (wrapping) flexbox works, the one inside does nothing. Is there anyway to get this to work?
What I'm looking to do is effectively have two sticky footers and have the height of both reach the the footers.
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
height: 100%:
}
#wrapper2 {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column;
}
#body2 {
border: 1px solid purple;
flex: 1;
}
#footer2 {
background: red;
flex: 0;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="body">Bodyof<br/>
variable<br/>
height<br/>
<div id="wrapper2">
<div id="body2">
blah
</div>
<div id="footer2">
blah<br />
blah
</div>
</div>
</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
JS Fiddle
You were almost there. Just two steps away:
#body
a flex container..wrapper2
full height with flex: 1
.(I also got rid of percentage heights. You don't need them.)
body {
margin: 0;
}
#wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#header {
background: yellow;
height: 100px;
}
#body {
flex: 1;
border: 1px solid orange;
display: flex; /* new */
flex-direction: column; /* new */
}
#wrapper2 {
display: flex;
flex-direction: column;
flex: 1; /* new */
}
#body2 {
border: 1px solid purple;
flex: 1;
}
#footer2 {
background: red;
}
#footer {
background: lime;
}
<div id="wrapper">
<div id="body">
Bodyof
<br>variable
<br>height
<br>
<div id="wrapper2">
<div id="body2">blah</div>
<div id="footer2">
blah
<br>blah
</div>
</div>
</div>
<div id="footer">
Footer
<br>of
<br>variable
<br>height
<br>
</div>
</div>
Once the adjustments above are made, you can pin the inner (red) footer to the bottom with:
flex: 1
on #body2
, which is what you have, ormargin-bottom: auto
on #body2
, ormargin-top: auto
on #footer2
, orjustify-content: space-between
on the container (#wrapper2
)If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With