JSFiddle - React, Tailwind, and code Playground

HTML

<div class="l-fit-height">
    <section class="l-fit-height-row">
        <div class="l-fit-height-row-content">
            <p>Header</p>
            <p>Header</p>
        </div>
    </section>
    <section class="l-fit-height-row-expanded">
        <div class="l-fit-height-row-content l-scroll">
            <div class="l-scroll-content">
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
                <p>Foo</p>
            </div>
        </div>
    </section>
    <section class="l-fit-height-row">
        <div class="l-fit-height-row-content">
            <p>Footer</p>
            <p>Footer</p>
            <p>Footer</p>
        </div>
    </section>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.l-fit-height {
    display: table;
    height: 100%;
}
.l-fit-height-row {
    display: table-row;
    height: 1px;
}
.l-fit-height-row-content {
    /* Firefox requires this */
    display: table-cell;
}
.l-fit-height-row-expanded {
    height: 100%;
    display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
    height: 100%;
    width: 100%;
}
@-moz-document url-prefix() {
    .l-scroll {
        /* Firefox requires this to do the absolute positioning correctly */
        display: inline-block;
    }
}
.l-scroll {
    overflow-y: auto;
    position: relative;
    height: 1000px;
}
.l-scroll-content {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 1000px;
    min-height:100px;
}