JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="top">
        <p>The top content may be a little long, and expand a couple
            of lines. Sometimes it may be short.</p>
    </div>
    <div id="middle">
        <p>The middle should have a scrollbar right now.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus leo, sollicitudin quis condimentum ac, scelerisque quis nulla. Vestibulum orci arcu, consectetur non sem nec, dapibus convallis sapien. Ut pulvinar odio at mattis finibus. In hac habitasse platea dictumst. Sed vestibulum erat eu urna elementum congue. Sed aliquam lobortis commodo. Proin lectus neque, ornare sit amet aliquet id, mollis et orci. Maecenas lobortis commodo semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

        <p>Quisque laoreet tempor rutrum. Aliquam maximus nisl dolor, ut auctor quam finibus ac. Praesent mollis, nibh a mollis egestas, elit tortor vehicula dolor, ut lobortis risus purus id lectus. Maecenas sodales mi vel porta maximus. Aliquam lectus felis, eleifend eu bibendum in, sollicitudin congue odio. Fusce ac pretium neque, at tristique orci. Duis vestibulum fermentum risus. Nunc pulvinar dictum nulla, sed commodo diam mollis eget. Nunc quis mollis felis. Pellentesque lacinia commodo pharetra.</p>

        <p>Vestibulum ac leo in nisi fermentum vehicula. Quisque congue, turpis eu consectetur aliquet, dui felis sollicitudin dolor, ut varius magna massa sit amet ligula. Suspendisse ut feugiat enim, eu elementum ligula. Suspendisse aliquam vestibulum nunc nec rutrum. Aliquam at tempus lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet suscipit ipsum. Etiam aliquet feugiat enim et fringilla. Vestibulum sed elit et justo fringilla ornare et a ligula. Sed in risus ac libero faucibus pellentesque. Cras eget purus nec eros pellentesque accumsan.</p>

        <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Cum sociis natoque penatibus et magnis dis...

CSS

#container {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 250px;
    box-sizing: border-box;
    border: 1px solid black;
    background-color: #eee;
}

#top {
    background-color: #ccc;
    box-sizing: border-box;
    padding: 5px;
    border-bottom: 1px solid black;
}

#middle {
    overflow-y: auto; /* does nothing */
    height: auto; /* does nothing */
}

#bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px;
    background-color: #ccc;
    box-sizing: border-box;
    padding: 5px;
    border-top: 1px solid black;
    text-align: center;
}







/* Showing explanation, not part of the example. */
#explain {
    position: absolute;
    left: 250px;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

JavaScript

/*

 The js is just for showing differences in stuff. 
 It has nothing to do with this example.

 */
















var i = 0;
var i_content;
function changeTop() {
    if (i == 0) i_content = $("#top").html();
    if (i++ % 2 == 0) {
        $("#top").html("Top Content (dynamic)");
    } else {
        $("#top").html(i_content);
    }
}

var j = 0;
var j_content;
function changeMiddle() {
    if (j == 0) j_content = $("#middle").html();
    if (j++ % 2 == 0) {
        $("#middle").html("The middle without scrolling?");
    } else {
        $("#middle").html(j_content);
    }
}