JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child">come long long long text without overflow blah blah blah blah blah blah blah blah blah  blah blah blah blah blah blah </div>
</div>

CSS

.parent {
    width: 300px;
    height: 300px;
    background-color: red;
}

.child{
    position:relative;
    width: 100px;
    height: 100px;
    top: 100px;
    left: 100px;
    background-color: yellow;
}
.parent:hover .child{
      overflow: hidden;
}