JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="header">
        Some<br/>
        Header
    </div>
    <div class="scroller">
    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 />
    </div>
    
    <div class="footer">
        Some<br/>
        Footer
    </div>
</div>

CSS

body{
    height:100%;
}
.wrapper{
    height:400px;
    border-left:1px solid red;
}

.header, .footer{
    background-color: #EEE;
    height:27px;
}

.scroller{
    height:calc(100% - 54px);
    background-color: #CCC;
    overflow:auto;
}