JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">A
  <div class="b">B
    <div class="c">C <br> asdfjhsijaf sdanfiu dsufanui sdfaiuhsdf uihfsdaiu sadfh sadfs sdaf adsf asdfasfdasdfs gasdg</div>
  </div>
</div>

CSS

.a {
  height: 200px;
  width: 150px;
  background: grey;
  position: relative;
  overflow: visible;

}

.b {
  width: 150px;
  height: 150px;
  background: red;
  position: absolute;
  top: 100px;
  left: 50px;
}

.c {
  width: 100px;
  height: 100px;
  background: purple;
  position: absolute;  
  top: 100px;
  left: 100px;
  overflow-x: hidden;
}