JSFiddle - React, Tailwind, and code Playground

HTML

<div id="greatgreatgrandparent">
  <div id="greatgrandparent">
    greatgrandparent
    <div id="grandparent">
      grandparent
      <div id="parent">
        parent
        <div id="child">
          <div>child</div>
          <div>child</div>
          <div>child</div>
          <div>child</div>
          <div>child</div>
          <div>child</div>
        </div>
      </div>
    </div>
    <div id="granduncle">
      granduncle
    </div>
  </div>
</div>

CSS

div {
  padding: 16px;
}

#greatgreatgrandparent {
  background: green;
  height: 300px;
  display: flex;
  flex-direction: column;
}

#greatgrandparent {
  background: greenyellow;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* overflow-y: hidden; */
}

#grandparent {
  flex: 1;
  background: yellow;
  display: flex;
  flex-direction: column;
  /* overflow-y: hidden; */
}

#parent {
  flex: 1;
  background: orange;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

#child {
  flex: 1;
  background: red;
  height: 2000px;
}

#granduncle {
  background: purple;
}