JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://demo.qooxdoo.org/5.0/framework/indigo-5.0.css">
  
  
<body class="qx-flex-ready" style="height: 100%">
  <div class="qx-vbox cont">
    <div class="headerContainer">Cell 1: flex1</div>
    <div class="mainContainer qx-flex3">
	x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
	x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
	x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
	x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
	x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
	
	</div>
    <div class="footerContainer" >Cell 3: flex1</div>
  </div>
</body>

CSS

.cont{
		background-color: blue;
		position: absolute;
		height: 100%;
		width: 100%;
	}
  
	.headerContainer {
		background-color: green;
		height: 100px;
		width: 100%;
	}
	
	.mainContainer {
		background-color: white;
		width: 100%;
		overflow: scroll
	}
	
	.footerContainer {
		background-color: gray;
		height: 100px;
		width: 100%;
	}