My goal is to create a layout where a child element fills the entire flex box of a flex layout.
Here is an example of the HTML structure I am using:
<div class="parent">
<div class="child1">
should have 100px height
</div>
<div class="child2">
<div class="intermediatechild2">
<div class="subchild2">should have 200px height and padding</div>
</div>
</div>
</div>
and the corresponding CSS:
.parent {
display: flex;
flex-direction : column;
height: 300px;
width: 200px;
}
.child1 {
height: 100px;
background: #008800;
flex: 0 0 auto;
}
.child2 {
height: 100%;
background: #003300;
flex: 0 0 auto;
}
.subchild2 {
height : 100%;
background: #ff0000;
}
.intermediatechild2 {
padding: 20px;
height : 100%;
width : 100%;
box-sizing: border-box;
border: 2px solid blue;
}
However, when implementing this code, I encountered an issue with the intermediatechild overflowing. The height set as 100% appears to be relative to .parent.
To see the issue in action, you can view the fiddle here: