JSFiddle - React, Tailwind, and code Playground

HTML

<body>   
    <div class="d1">
       <div class="d2">
          <div class="d3">
            <div class="d3-1">
                HEADER
            </div>
            <div class="d3-2">
                <div class="d4">test</div>
            </div>
          </div>
        </div>
    </div>
</body>

CSS

.d1 {
    height: 200px;
}
.d2 {
    height: 100%; 
}
.d3 {
   height:100%; 
}
.d3-1 {
   height:50px;
}
.d3-2{
    max-height: 100%;
    overflow: auto;
}
.d4 {
    height:3000px
}


.d1{
    #border:1px solid black;
}
.d2{
    border:2px solid red;
}
.d3-1{
    border:2px solid yellow;
}
.d3-2{
    border:2px solid green;
}
.d4{
    #border:2px solid blue;
}