JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container-big">
<div class="header-big">HEADER 1</div>
<div class="content-big">
<div class="container">
<div class="header">HEADER 2</div>
<div class="content">
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
<div class="fill f1"></div>
<div class="fill f2"></div>
</div>
</div>
</div>
</div>
CSS
.container-big {
background: blue;
height: 600px;
width: 250px;
}
.container {
background: lightblue;
height: 100%;
width: 95%;
padding:0 2%;
}
.header-big{
background: yellow;
height:30px;
width:100%;
}
.header{
background: lightyellow;
height:30px;
width:100%;
}
.content-big {
height: : calc(100% - 30px);
width: 100%;
overflow-y:auto;
}
.content {
max-height: calc(100% - 30px);
max-width: 100%;
overflow-y:auto;
}
.fill{
height: 40px;
width: 100%;
}
.f1{
background: grey;
}
.f2{
background: brown;
}