JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
<div id="w">
  <div id="c">
    <div>HELLO</div>
    <div id="max-parent">
      <div id="abs-p">
      <div id="abs-c">
        Dropdown
      </div>
      </div>
    </div>

    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>
    <div>HELLO</div>                                                     
  </div>
</div>
</div>

CSS

#test {
  position: relative;
  width: 900px;
  background-color: lightblue;
}

#W {
  overflow-x: visible;
  height: 150px;
  width: 150px;
  display: inline-block;
  background-color: lightgray;
}

#c {
  overflow-y: scroll;
  display: inline-block;
  height: 150px;
  width: 150px;
  background-color: lightgray;
}



#abs-p {
  position: relative;
  display: inline-block;
  background-color: red;
}

#abs-c {
  position: absolute;
  text-align: right;
  width: 400px;
  background-color: red;
}