JSFiddle - React, Tailwind, and code Playground

HTML

<div id="listContainer">
<ul>
    <li>Lorem ipsum</li>
    <li>Dolor sit amet</li>
    <li>Consectetur adipisicing elit</li>
    <li>Sed do eiusmod tempor</li>
    <li>Incididunt ut labore et dolore</li>
    <li>Magna aliqua</li>
    <li>Ut enim ad minim veniam</li>
    <li>Quis nostrud exercitation</li>
    <li>Ullamco laboris nisi ut</li>
    <li>Aliquip ex ea commodo consequat</li>
    <li>Duis aute irure dolor</li>
    <li>In reprehenderit</li>
    <li>In voluptate velit esse</li>
    <li>Cillum dolore eu fugiat nulla pariatur</li>
    <li>Excepteur sint occaecat</li>
    <li>Cupidatat non proident</li>
    <li>Sunt in culpa qui officia</li>
    <li>Deserunt mollit anim id est laborum</li>
</ul>
</div>
    
    
<button id="add-scrollbar">Add Scrollbar</button>
<button id="remove-scrollbar" disabled>Remove Scrollbar</button>
<p id="no-sb-text">Mouse over the items in the box. Notice how an ":after" pseudo-element is used to display the entire contents of an item (with a nice background) on mouse-over (see the "li:hover:after" rule in the CSS). Then click the "Add Scrollbar" button.</p>
<p id="sb-text" style="display:none">Now mouse over the items again. Notice that the "overflow-y:scroll" rule used to add the scrollbar causes the content preview to be hidden inside the box, even though "overflow-x:visible" was specified. Argh!<br /><br />
    I want the content previews to display OVER the scrollbar.<br/><br/>
See the "ul.scrolling" CSS rule.</p>

CSS

body {
    margin-top: 30px;
}
ul {
    display: block;
    margin: 0;
    list-style-type: none;
    border: 1px solid #aaaaaa;
    width: 150px;
    font: 12px verdana, arial, sans-serif;
    padding: 0;
    overflow-x: visible;
}
ul.scrolling {
    overflow-y: scroll;
    margin-right: -16px;
}
li {
    position:relative;
    margin: 0;
    padding: 0 5px;
    line-height: 25px;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    white-space: nowrap;
    color: black;
    cursor: pointer;
    overflow: hidden;
}
ul.scrolling > li {
    padding-right: 6px;
}
li:hover {
    background-color: #c7e0ff;
    overflow: visible;
}
li:hover:after {
    content: attr(contents);
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 5px;
    z-index: 999999;
    background-color: #c7e0ff;
}
button {
    float: right;
    clear: right;
    width: 150px;
}
p {
    font: 12px arial, sans-serif;
    clear: right;
    display: block;
    float: right;
    width: 160px;
    margin: 20px 5px;
    padding: 10px;
    line-height: 20px;
    background-color: whitesmoke;
}
li:hover{z-index:1;position:absolute;}
#listContainer{z-index:0;width:150px;height:200px;border:1px solid red;overflow-y:scroll;overflow-x:visible;}

JavaScript

$('li').each(function () {
    $(this).attr('contents', $(this).html());
});

$('#add-scrollbar').click(function () {
    $('ul').addClass('scrolling');

    $(this).attr('disabled', 'disabled');
    $('#remove-scrollbar').removeAttr('disabled');
    $('#no-sb-text').hide();
    $('#sb-text').show();
});

$('#remove-scrollbar').click(function () {
    $('ul').removeClass('scrolling');

    $(this).attr('disabled', 'disabled');
    $('#add-scrollbar').removeAttr('disabled');
    $('#no-sb-text').show();
    $('#sb-text').hide();
});