JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div class="parent">
        <div class="child">
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
    </div>
    aa<br/>
    aa<br/>
    aa<br/>
    aa<br/>
</div>

CSS

.parent{
    height: 80px;
    overflow: auto
        
}
.child{
    height: 60px;
    overflow: auto
}

.fixoverflow{
    overflow: hidden
}

JavaScript

$('.child').on('mouseover',function(){
    $(this).parent().addClass('fixoverflow');
});

$('.child').on('mouseleave',function(){
    $(this).parent().removeClass('fixoverflow');
});