JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parent">
<div class="header">Heading</div>
<div class="scrollContainer">
<div class="innerScroll">
Lots of text goes here. Lots of text goes here. Lots of text goes here.<p>
</p>
Lots of text goes here. Lots of text goes here. Lots of text goes here.<p>
</p>
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of text goes here. Lots of text goes here.<p>
</p>
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of text goes here. Lots of text goes here.<p>
</p>
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of text goes here. Lots of text goes here.<p>
</p>
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of text goes here. Lots of text goes here.<p>
</p>
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of text goes here. Lots of text goes here.<p>
</p>
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of text goes here. Lots of text goes here.
Lots of text goes here. Lots of...
CSS
.parent
{
margin:0px;
padding:0px;
height: 400px;
background-color: orange;
border: thick purple solid;
position: relative;
}
.header
{
font-weight: bold;
font-size: 28pt;
font-family: sans-serif,Arial;
border:yellow thick solid;
}
.scrollContainer
{
position: absolute;
border: thick blue solid;
bottom:0px;
top:55px;
left:0px;
right: 0px;
}
.innerScroll
{
position: absolute;
overflow-y: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
height: 100%;
}