JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="tr stretch">
        <div class="td">a header</div>
    </div>
    <div class="tr">
        <div class="td">
            <div class="contentWrapper">
                <div class="content">content 0
                    <br/>content 1
                    <br/>content 2
                    <br/>content 3
                    <br/>content 4
                    <br/>content 5
                    <br/>content 6
                    <br/>content 7
                    <br/>content 8
                    <br/>content 9
                    <br/>content 10
                    <br/>content 11
                    <br/>content 12
                    <br/>content 13
                    <br/>content 14
                    <br/>content 15
                    <br/>content 16
                    <br/>content 17
                    <br/>content 18
                    <br/>content 19
                    <br/>content 20
                    <br/>content 21
                    <br/>content 22
                    <br/>content 23
                    <br/>content 24
                    <br/>content 25
                    <br/>content 26
                    <br/>content 27
                    <br/>content 28
                    <br/>content 29</div>
            </div>
        </div>
    </div>
    <div class="tr stretch">
        <div class="td stretch">a footer</div>
    </div>
</div>

<div class="wrapper">
    <div class="tr stretch">
        <div class="td">a header</div>
    </div>
    <div class="tr stretch">
        <div class="td">another
            <br/>header</div>
    </div>
    <div class="tr">
        <div class="td">
            <div class="contentWrapper">
                <div class="content">content 0
                    <br/>content 1
                    <br/>content 2
                    <br/>content 3
                    <br/>content 4
                    <br/>content 5
                    <br/>content 6
                    <br/>content...

CSS

.wrapper {
    height:200px;
    width: 200px;
    border: 1px solid lime;
    display: table;
    margin: 20px;
}
.tr {
    display: table-row;
}
.td {
    display: table-cell;
    border: 1px solid dodgerBlue;
}
.stretch {
    height: 1%;
}
div {
    background: #eee;
}
.content {
    background: yellow;
    position: absolute;
    left: 0;
    right: 0;
}

.contentWrapper {    
    position: relative;
    overflow-y: scroll;
    height: 100%;
}