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 Some text Some text Some text Some text Some text AAA text Some text Some text AAAA text Some text Some text Some text Some text Some text 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%;
    white-space: nowrap;
    overflow: scroll;
    padding: 10px 0;
}