The problem is described in this image:
EDIT :
The first included div
should always be visible. The second one is hiding its remaining content when main div
is fully filled.
<div style="height:100%">
<div>Dynamic ajax content</div>
<div style="max-height:[remaining space]">Dynamic ajax content</div>
</div>
Here is a fiddle of what I have so far.
Solution:
HTML
<div id="outer">
<div id="inner_fixed">
I have a fixed height
</div>
<div id="inner_remaining">
I take up the remaining height
</div>
</div>
CSS
#outer {
display: flex;
flex-flow: column;
height: 100%;
}
#inner_fixed {
height: 100px;
background-color: grey;
}
#inner_remaining {
background-color: #DDDDDD;
flex-grow : 1;
}
There are other solutions provided in this article: https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height
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