JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="inner-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>
</div>

CSS

#container {
    position:absolute;
    width:100%;
    height:100%;
    background-color:#ff0;
    display:flex;
    align-items:center;
    justify-content:center;
    display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-ms-flexbox;
    -ms-flex-align:center;
    -ms-flex-pack:center;
    
}
#container #inner-container {
    border:solid 1px black;
    padding:10px;
    width:300px;
    height:300px;
}