JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="child">

          <p>asd</p>
          <p>asd</p>
          <p>asd</p>
                <p>asd</p>
        <p>asd</p>
        <p>asd</p>

          <p>asd</p>
          <p>asd</p>
          <p>asd</p>
        <p style='margin:3em 0;'>---------</p>
        <p style='margin:3em 0;'>---------</p>
    </div>
</div>

CSS

#parent{
    position:absolute;
    width:500px;
    top:10px;
    bottom:10px;
    border:2px solid red;
}
#child{
    border:2px solid blue;
    position:absolute;
    bottom:0px;
    right:0px;
    left:0px;
    overflow-y:scroll;
    max-height:100%;
}