JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel">
    <ul class="list">
        <li class="item">
            <span>item00</span>
        </li>
        <li class="item">
            <span>item01</span>
        </li>
        <li class="item">
            <span>item02</span>
        </li>
        <li class="item">
            <span>item03</span>
        </li>
        <li class="item">
            <span>item04</span>
        </li>
        <li class="item">
            <span>item05</span>
        </li>
        <li class="item">
            <span>item06</span>
        </li>
        <li class="item">
            <span>item07</span>
        </li>
        <li class="item">
            <span>item08</span>
        </li>
        <li class="item">
            <span>item09</span>
        </li>
        <li class="item">
            <span>item10</span>
        </li>
    </ul>
</div>

CSS

.panel {
    width: 50px;
    height: 300px;
    padding: 0px;
    background-color: gray;
    overflow-y: scroll;
    z-index: 800;
}

.panel>.list {
    width: 50px;
    height: 500px;
    margin: 0px;
    padding: 0px;
    background-color: lightgray;
    z-index: 900;
}

.panel>.list>.item {
    width: 50px;
    height: 30px;
    background-color: darkgray;
    padding: 0px;
    border: 1px solid black;
    list-style: none;
    cursor: pointer;
    z-index: 1000;
}

.panel>.list>.item:hover {
    width: 200px;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.panel:hover ul.list:first-child {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.panel ul.list:first-child {
    display: block;
}