JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
        <div id="top-padding"></div>
        <div id="stuff">
            <p>some content</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>End of content.
        </div> 
    </div><!-- content -->

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#content {
    position: relative;
    background-color: #C9E6FF;
    margin: 0 auto;
    width: 300px;
    height:100%;
}

#top-padding {
    background: blue; 
    height: 30px;
    width: 100%;
}

#stuff {
    overflow-x:auto;
    background-color: lightgreen;
    top:30px;
    left:0;right:0;
    bottom:0;
    position:absolute;
}