JSFiddle - React, Tailwind, and code Playground

HTML

<div id="panel" class="flex-container">
    <header class="flex-fixed">This is the header</header>
    <div class="flex-var content">
        <ul id="list">
        </ul>
    </div>
    <footer class="flex-fixed">This is the footer</footer>
</div>

CSS

.flex-container {
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
}

.flex-fixed {
    flex: 0 1 auto;
    -ms-flex: 0 1 auto;
}

.flex-var {
    flex: 0 1 auto;
    -ms-flex: 0 1 auto;
}


#panel {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 200px;
    color: white;
    overflow: hidden;
}

#panel > header {
    background: red;
}

#panel > .content {
    background: blue;
    overflow-y: auto;
}

#panel > footer {
    background: green;
}

JavaScript

function setMaxHeight() {
    var maxHeight = $(window).height() - 16;
    $("#panel").css({
        height: maxHeight + "px"
    });
}

$(window).on("resize", function() {
    setMaxHeight();
});
setMaxHeight();

var i = 0;

setInterval(function() {
    var ul = $("#list");
    ++i;
    if (i <= 20) {
        var li = $("<li>").text("Item " + i);
        ul.append(li);
    } else if (i <= 40) {
        ul.children().last().remove();
    } else {
        i = 0;
    }
}, 60);