JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css">
<div id="outer">
  <p>
  Below you find a multiple select box that should overflow the outer div.
  </p>
  <label for="select">Multiple select:</label>
  <select id="select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
  <p>
    Scroll to the button when the select box is open.
  </p>
  <button>
    Do nothing
  </button>  
</div>

CSS

#outer {
  max-height: 110px;
  overflow: auto;
  background-color: green;
  color: white;
}

#select {
  width: 200px;
}
.ms-drop {
  position:fixed;
  width:200px;
}

JavaScript

$('select').multipleSelect();
var sTop = $('.ms-parent ').offset().top,
    sHeight = $('.ms-parent ').height()
$('.ms-drop.bottom').css('top',sTop+sHeight)