I have designed the following HTML element.
In this case, the remaining-height class is intended to be the remaining height of the container-div, which should be 100 - 15 = 85px. However, because the grand-child-div has a height of 200 px, the remaining-height div extends beyond the container-div.
How can I ensure that the remaining-height div reflects the correct height of the container-div (which should be 85px)?
Adding onto the previous comment, the remaining-height div should have a scroll inside it as the grand-child-div will have a greater height than the remaining-height.
<div class="container-div" style="height:100px">
<div class="fixed-height">
</div>
<div class="remaining-height">
<div>
<div class="grand-child-div" style="height:200px">
</div>
</div>
</div>
</div>
Here is the CSS:
.remaining-height {
flex: 1 1 auto;
display: flex;
flex-flow: column;
background-color: yellow;
}
.fixed-height {
height: 15px;
background-color: green;
}