Select2 options not scrolling with custom scrollbar

Question

I have got a Div with fixed height and applied custom scroll to it.

Now when I scroll this Div content with mouse wheel, then the select2 options (when kept open) do not scroll along with respective select2 dropdown.

Here is the JSFiddle of my problem.

Click the dropdown to show options and then scroll with mouse wheel keeping options open. The options do not scroll even though dropdown goes up.

Is there any solution for this? Please suggest, thanks!

$('.customize-content').mCustomScrollbar();

$('select').select2({
  minimumResultsForSearch: Infinity
});

<div class="customize-content has-toggle">
  <div>

    <select>
      <option>Text 1</option>
      <option>Text 2</option>
      <option>Text 3</option>
      <option>Text 4</option>
    </select>

  </div>
</div>

Answer 1

Problem

The html for the dropdown is added outside of the container you are scrolling and overlayed with position absolute.

Solution

Use the option dropdownParent to add the dropdown within the container:-

$('select').select2( {
   minimumResultsForSearch: Infinity,
   dropdownParent:$('#mCSB_1_container')
});

Updated Fiddle