JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="header">Header</div>
<div id="content">
<div id="inner_header">Inner Header</div>
<div id="scrollable_content">Very long content 1
<br />Very long content 2
<br />Very long content 3
<br />Very long content 4
<br />Very long content 5
<br />Very long content 6
<br />Very long content 7
<br />Very long content 8
<br />Very long content 9
<br />Very long content 2
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long content
<br />Very long...
CSS
html, body {
height:100%;
margin: 0;
padding: 0;
overflow: hidden;
}
div {
margin: 0;
padding: 0;
/*border: 1px solid black;*/
}
div#content {
height: 100%;
}
div#header, div#inner_header {
height: 25px;
background-color: gray;
color: white;
}
div#container {
height:100%;
}
div#scrollable_content {
position: absolute;
top: 50px;
bottom: 0px;
overflow-y:auto;
border: 1px solid green;
width: 100%;
}