<div class="parent">
  <div class="first">
    <div>item</div>
    <div>item</div>
    <div>item</div>
  </div>
  <div div="second">
    <div>item</div>
    <div>item</div>
  </div>
</div>

I want my first div to be limited to the height of second div. Basically I want my parent div to not to respect the height of my first div, but the second div and make the first div scroll-able if it exceeds the height of my second div.

Here is the code pen link codepen

I currently don’t have anything in my mind to approach this issue.