JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child1"></div>
  <div class="child2">
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
  </div>
</div>

CSS

.parent {
  background-color: blue;
  position: absolute;
  border: 2px solid black;
  padding: 5px;
  width: 250px;
  height: auto;
  max-height: 200px;
  /* overflow-y: auto;*/ /* this works, but it's not my preferred solution */
}

.child1 {
  background-color: red;
  border: 2px solid black;
  width: 100%;
  height: 50px;
  position fixed;
}

.child2 {
  background-color: yellow;
  border: 2px solid black;
  width: 100%;
  height: inherit;
   
  position: relative;
  height: 100%;
  overflow-y: auto; /* This is not applies*/
}