JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<body>

    <p>The first included div should always be visible.<br>The second one is hiding its remaining content when main div is fully filled.</p><br>

<div id=main>
    <div>Dynamic ajax content</div>
    <div>Dynamic ajax content<br>Dynamic ajax content</div>
</div>

CSS

#main{
    height: 300px;
    border: 1px solid;
}
#main :first-child{
    min-height: 50%;
}
#main :last-child{
    border: 1px solid red;
    max-height: [remaining space];
    overflow-y: auto;
}