JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    
    <div class="header">
        header
    </div>
    <div class="contentCont">
        <div class="content">
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            content <br />
            bottom
        </div>
    </div>
    <div class="footer">
        footer
    </div
    
</div>

CSS

* {
    padding:0;
    margin:0;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}
.container {
    height:100%;
    width:100%;
    overflow:hidden;
    position:absolute;
}
.header {
    height:25px;
}
.contentCont {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:25px;
    margin-bottom:50px;
    margin-right:0;
    margin-left:0;
    background-color: green;
}
.content {
    background:#efefef;
    width:100%;
    height:100%;
    overflow-x:scroll;
}
.footer {
    height:50px;
    width:100%;
    background:#4679bd;
    position:absolute;
    bottom:0;
}