JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="a">
        top
        <div class="b">bottom</div>
    </div>
    <div class="footer">Some text</div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
}

.wrap {
    background-color:#ccc;
    position: relative;
}

.a {
    height: 150px;
    overflow-y: scroll;
}

.b {
    margin-top: 300px;
    padding-bottom: 20px;
}

.footer{
    position:absolute;
    bottom:0;
    left:0;
    background-color:#666;
    color:#fff;
    width: 100%;
    height: 20px;
}