JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "left">
    <div class = "top">
        <p>Dynamic height</p>
    </div>
    
    <div class = "middle">
        <div class = "inner">
            
        </div>
    </div>
    
    <div class = "bottom">
        <p>Dynamic height</p>
        <p>Dynamic height</p>
        <p>Dynamic height</p>
    </div>
</div>

<button>Click to add content</button>

CSS

.left {
    border:1px solid orange;
    width:200px;
    height:300px;
    display:table;
}

.top {
    display:table-row;
}

.middle {
    display:table-row;
    height:100%;
}

.middle .inner {
    background-color:red;
    height:100%;
    overflow-y:auto;
}

.bottom {
    display:table-row;
}

JavaScript

$(function () {
    $('button').click (function () {
        $('.inner').append ('<span style = "display:block;">Text</span>');
    });
});