CSS: max-height: remaining space

Question

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.

Answer 1

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