JSFiddle - React, Tailwind, and code Playground

HTML

<div id="stuff">
<ul>
    <li><a href="#">Item #1</a></li>
    <li><a href="#">Item #2 this one has a really long name</a></li>
    <li><a href="#">Item #3</a></li>
    <li><a href="#">Item #4</a></li>
    <li><a href="#">Item #5</a></li>
</ul>
</div>

<br/><br/>
Hovering over items 1-4 works fine. Hovering or clicking item #5 does not work.

CSS

#stuff {
    width: 100px;
    overflow: scroll;
    font-size: 13px;
}

a {
    white-space: nowrap;
}