JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
		<div class="container">
			<div class="container-scroll">
				<div class="main">
					
				</div>
			</div>
		</div>
	</div>

CSS

#wrapper {
			width: 100%;
			height: 1500px;
			border: 1px solid red;
			padding-top: 380px;
		}
		#wrapper .container {
			border: 1px solid green;
			width: 100%;
			height: 500px;
			overflow: scroll;
		}
		#wrapper .container-scroll {
			height: 1500px;
			width: 100%;
			border: 1px solid yellow;
		}
		#wrapper .main {
			width: 980px;
			height: 500px;
			background: black;
			overflow: scroll;
			/*position: fixed;*/
		}