JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="panel">
	<ul class="list">
		<li class="item">
			<span>item1</span>
		</li>
		<li class="item">
			<span>item2</span>
		</li>
		<li class="item">
			<span>item3</span>
		</li>
	</ul>
</div>

CSS

.panel {
	width : 50px;
	height : 300px;
	padding: 0px;
	background-color : lightgrey;
	overflow-y: scroll;
	z-index : 800;
      border: 1px solid black;
}

.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;
}

JavaScript

$( ".panel > .list > .item" )
  .mouseover(function() {
    $( ".panel" ).css( "overflow-y","visible" );
    $( ".panel > .list" ).css( "height","100%" );
  })
  .mouseout(function() {
    $( ".panel" ).css( "overflow-y","auto" );
    $( ".panel > .list" ).css( "height","500px" );
  });