JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixedContainer">
<input type=text id="m">
  <div class="jChoicebox ui-choicebox">
    <button class="jChoiceboxToggle ui-btn" type="button">
      Dropdown Toggle
    </button>
    <div class="jChoiceboxMenu ui-choicebox-menu collapse">
     <ul>
      <li><a class="ui-option" href="#">Option 1</a></li>
      <li><a class="ui-option" href="#">Option 2</a></li>
      <li><a class="ui-option" href="#">Option 3</a></li>
      <li><a class="ui-option" href="#">Option 4</a></li>         
      <li><a class="ui-option" href="#">Option 5</a></li>
      <li><a class="ui-option" href="#">Option 6</a></li>
      <li><a class="ui-option" href="#">Option 7</a></li>
      <li><a class="ui-option" href="#">Option 8</a></li>
      <li><a class="ui-option" href="#">Option 9</a></li>
      <li><a class="ui-option" href="#">Option 10</a></li>         
      <li><a class="ui-option" href="#">Option 11</a></li>
      <li><a class="ui-option" href="#">Option 12</a></li>
      <li><a class="ui-option" href="#">Option 13</a></li>
      <li><a class="ui-option" href="#">Option 14</a></li>
      <li><a class="ui-option" href="#">Option 15</a></li>
      <li><a class="ui-option" href="#">Option 16</a></li>         
      <li><a class="ui-option" href="#">Option 17</a></li>
      <li><a class="ui-option" href="#">Option 18</a></li> 
      <li><a class="ui-option" href="#">Option 19</a></li>
      <li><a class="ui-option" href="#">Option 20</a></li>             
     </ul>
    </div>
  </div>

</div>

CSS

body { padding:15px; }
.fixedContainer {
    position:relative; height:300px; overflow:hidden; 
    font-family:sans-serif; font-size:13px; border:1px solid #ccc; }
.ui-btn {
    width:200px; padding:10px; background:salmon; 
    border:none; font-size:inherit; }
.ui-option { 
    display:block; text-decoration:none; 
    height:30px; line-height:30px; color:salmon; }
.collapse {display:none;}

#m {float:right}

.ui-choicebox-menu { 
 position:absolute; left:0; top:0; bottom:0;
 list-style:none; 
 background-color:#efefef; border:1px solid #ccc; 
 box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
 overflow:hidden; list-style:none; padding:0;
}
.ui-choicebox-menu ul { position:absolute; left:0; top:0; right:0; margin:0; padding:0; min-height:100%;
background-color:#cdcdcd;}
.ui-choicebox-menu li { display:block; padding:0; margin:0;}

JavaScript

//choicebox dropdown
$('.jChoiceboxToggle').click( function(event){
   event.stopPropagation();
   var thismenu = $(this).next('.jChoiceboxMenu');
   thismenu.toggleClass('collapse').css({ 
       'left': $(this).position().left, 
       'width': $(this).outerWidth() 
   });
   $('.jChoiceboxMenu').not( thismenu ).addClass('collapse');
});

$('.jChoiceboxMenu').hover(function() {
    
    var container = $(this),
        list = container.find('ul');
        listheight = list.outerHeight(),
        containerTop = container.offset().top,
        multiplier= listheight/container.outerHeight();
		$('#m').val( listheight + "/" + container.outerHeight() + "=" + multiplier);

    if ( listheight > container.outerHeight() ) {
            container.addClass('jChoiceboxScrolling');
            list.mousemove(function(e) {
                var relativeY = (( Math.floor(e.pageY) - containerTop) * multiplier);  
                if ( relativeY > 0 ) {
                    list.css("top", -relativeY );
                }
            });
    }

    }, function() {
        //console.log( 'hoverstop' );
    });

    $(document).click(function(event) { 
        $('.jChoiceboxMenu').addClass('collapse');  
    });