When creating a flexbox with 2 children in column flow and applying flex-grow 1 to the second child, it expands to fill the flexbox.
(Note: I avoided mentioning Safari support in this example, so please use Chrome or Firefox)
* {
box-sizing: border-box;
}
html, body {
margin: 0;
width: 100%;
height: 100%;
color: white;
}
#outer {
display: flex;
flex-flow: column;
height: 100%;
}
#top {
background-color: red;
}
#bottom {
background-color: blue;
flex: 1 0 auto;
}<div id="outer">
<div id="top">top</div>
<div id="bottom">bottom (blue)</div>
</div>
However, when adding a child #inside inside #bottom and setting its height to 100%, it doesn't increase its height to match even though the flexbox has stretched #bottom.
Additional CSS:
#inside {
background-color: green;
height: 100%;
}
HTML:
<div id="outer">
<div id="top">top</div>
<div id="bottom">
<div id="inside">inside</div> <!- added ->
</div>
</div>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
width: 100%;
height: 100%;
color: white;
}
#outer {
display: flex;
flex-flow: column;
height: 100%;
}
#top {
background-color: red;
}
#bottom {
background-color: blue;
flex: 1 0 auto;
}
#inside {
background-color: green;
height: 100%;
}<div id="outer">
<div id="top">top</div>
<div id="bottom">
<div id="inside">inside (green)</div>
</div>
</div>To make #bottom stretch to fit the flexbox while also getting the child #inside to be 100% height of its container #bottom, how can this be achieved?