JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <p>This is the container.</p>
    <p>If you resize the JSFiddle window horizontally, you will see that the left edge of the box doesn't move past the left edge of the window. This is correct behaviour.</p>
    <p>Now if you move the window vertically, the top of this container will disappear off of the top of the window. This is wrong.</p>
</div>

CSS

#container {
    margin:auto;
    height:300px;
    width:300px;
    margin-top: -150px;
    margin-left: -150px;
    top:50%;
    left:50%;
    position:absolute;
    border:1px solid;
    padding:10px;
    overflow:auto;
}