JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar">
    <div class="table stretch-v">
        <div class="row stretch-v">
            <div class="cell">
                <div class="top-class stretch">
                    Should fill the remaining height of the parent<br />foo<br />bar<br />foobar<br />foo<br />bar<br />foobar<br />foo<br />bar<br />foobar<br />bar<br />bar<br />bar<br />spam<br />spam<br />spam<br />spam<br />spam<br />spam
                </div>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <div class="bottom-class">
                    Should be high enough to fit its contents<br />A few lines of text <br />A few lines of text <br />A few lines of text <br />A few lines of text <br />
                </div>
            </div>
        </div>  
    </div>
</div>

CSS

body,html{height:100%; width:100%; padding:0; margin:0;}
.sidebar{height: 100%; background:grey;}
.table {display:table;}
.row {display:table-row;}
.cell {display:table-cell;}
.stretch-v {height:100%}
.stretch {width:100%; height:100%;}
.top-class{overflow:auto; background:#f99}
.bottom-class{background:#9f9}