JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="main">
        <div id="left-bg"></div>
        <div id="container">
          a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>	
            </div>
            </body>

CSS

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

body{position: relative;overflow: auto;}

#main{
	background: #333;
    min-height: 100%;
	position: relative;
	width: 100%;
	display: block;
}

#container {
	height: 100%;
	width: 480px;
	background: #0f0;
	position: relative;
	margin-left: 50%;
	left: -240px;
	
}

#left-bg {
	min-height: 100%;
	position: absolute;
	top: 0; left:0;
	background: #00f;
	width: 50%;
}