JSFiddle - React, Tailwind, and code Playground

HTML

<body style="float:right">


<div id="A" style="overflow:auto;max-height:100px;width:200px;text-align:right">

<div id="B" style="position:relative">A TEXT

<div id="C" style="position:absolute;left:-200px;width:200px;background-color:grey">
  <div id="D">THIS TEXT IS GETTING DISAPPEARED after setting the overflow:auto on the parent DIV with id="A"
  </div><!-- End of DIV with id="D" -->

</div><!-- End of DIV with id="C" -->

</div><!-- End of DIV with id="B" -->



</div><!-- End of DIV with id="A" -->


</body>