JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<select id="testDropdown">
  <option value=""></option>
   <option value="1">test1</option>
   <option value="2">test2</option>
   <option value="3">test3</option>
   <option value="4">test4</option>
   <option value="5">test5</option>
   <option value="6">test6</option>
   <option value="7">test7</option>
   <option value="8">test8</option>
   <option value="9">test9</option>
   <option value="10">test10</option>
</select>

CSS

span.select2.select2-container { width: 100% !important; }
.select2-container--default .select2-results > .select2-results__options { overflow:hidden; }
.select2-results { overflow: hidden; max-height: 150px; }

JavaScript

$('#testDropdown').select2();

$("span.select2-selection").on("click", function () {
        $(".select2-results").toggleClass("mCustomScrollbar").attr('data-mcs-theme', 'gray-theme');
        $(".select2-results").mCustomScrollbar("destroy");
        $(".select2-results").mCustomScrollbar({
          advanced: {
            updateOnContentResize: true
          }, 
          live: true,
          mouseWheel:true,    
          scrollInertia: 500
        });
    });