JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<div class="Top">Top Content</div> 
<div class="Container">
<div class="Left sect">Left Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="Middle sect">Middle Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...

CSS

* {
				-webkit-box-sizing: border-box;
				        box-sizing: border-box;
			}
			/*This just stops me getting horizontal scrolling if anything overflows the width*/
			body {
				overflow-x: hidden;
			}
			/*Just removing default browser padding/margin*/
			html,
			body {
				padding: 0;
				margin: 0;
			}
			/*Flexbox gives us the flexiness we need. The top just stays put as there is no scrolling on the body due to the page never exceeding viewport height*/
			.Top {
				display: -webkit-box;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				background-color: darkgreen;
				font-size: 3rem;
				position: relative;
				z-index: 10;
				height: 100px;
			}
			/*This is our main wrapping element, it's made 100vh high to ensure it is always the correct size and then moved into place and padded with negative margin and padding*/
			.Container {
				display: -webkit-box;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				overflow: hidden;
				height: 100vh;
				margin-top: -100px;
				padding-top: 100px;
				position: relative;
				width: 100%;
				-webkit-backface-visibility: hidden;
				        backface-visibility: hidden;
				will-change: overflow;
			}
			/*All the scrollable sections should overflow and be whatever height they need to be. As they are flex-items (due to being inside a flex container) they could be made to stretch full height at all times if needed.
			WebKit inertia scrolling is being added here for any present/future devices that are able to make use of it.
			*/
			.sect {
				overflow: auto;
				height: auto;
				padding: .5rem;
				-webkit-overflow-scrolling: touch;
				-ms-overflow-style:...