Select2 dropdown are floating

[justkidding96]

I've an issue that my dropdown from Select2 are floating when I scroll to the page. I think this issue caused that select2 creates an element outside the scroll-content div.

[sadeghbarati]

@justkidding96

https://stackblitz.com/edit/github-urgjn6?file=src/index.html

Have you tried select2 dropdownParent option?

<div id="select2Wrapper" class="position-relative">
 <select class="js-example-basic-single w-100">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
  
  <!-- dropdown will append inside of #select2Wrapper -->
</div>

<script>
  window.addEventListener('load', function () {
    $('.js-example-basic-single').select2({
      dropdownParent: $('#select2Wrapper'),
    });
  });
</script>