JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>
            <input type="text" value="Search" />
        </li>
    </ul>
</div

CSS

div {
    position: fixed;
    width: 300px;
    background: gray;

    top: 0;
    bottom: 0;
}

div:hover {
    overflow: auto;
}

ul {
    border: 1px solid red;
}