JSFiddle - React, Tailwind, and code Playground

HTML

<html style="width:100%;height:100%;">
    <body style="height:100%;width:100%;padding:0;margin:0">
        <table style="height:100%;width:100%;">
            <tr><td style="height:50px;width:100%;background-color:blue"></td></tr>
            <tr><td style="height:100%;width:100%;background-color:grey">
                <div id="scroller" style="max-height:100px;overflow:auto;height:100%">
                    xxblah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
                </div>
            </td></tr>
            <tr><td style="height:50px;width:100%;background-color:green"></td></tr>
        </table>
        <script>
			var scroller = document.getElementById('scroller');
            console.log(scroller);
            console.log(scroller.parentNode);
            console.log(scroller.parentNode.offsetHeight);
            scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
            var reset = true;
			window.onresize = function() {
                console.log(scroller.parentNode.offsetHeight - 4);
                scroller.style.maxHeight = "100px";
                if (reset) {
                    reset = false;
                    setTimeout(function() {
                        reset = true;
                        scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
	                }, 100);
                }
			};
        </script>
    </body>
<html>