The horizontal scroll bar automatically appears when clicking select2

Question

I use select2 and bootstrap. Every time I click select2, my page will expand and appear a horizontal scrollbar. How to solve this problem:

This is my HTML code

<div class="row">
  <div class="col-md-12">
     <select id="js-data-example-ajax" class="js-data-example-ajax form-control" name="parentId"></select>
  </div>
</div>

This is my JS Code

    $(document).ready(function() {
        const url = "/ajax/categories";
        $('#js-data-example-ajax').select2({
            ajax: {
                url: url,
                dataType: 'json',
                data: function (params) {
                    const query = {
                        keyword: params.term,
                        page: params.page || 1,
                        limit: 10
                    }
                    return query;
                }
            }
        });
    });

Answer 1

Fix for me with Bootstrap 5.2 was to add position:relative to the containing col div.

Bootstrap has a class for it: position-relative

<div class="row">
    <div class="col-12 position-relative">
        <select id="js-data-example-ajax" class="js-data-example-ajax form-control" name="parentId"></select>
    </div>
</div>

Edit:

I have had it where position-relative didn't fix it. Setting dropdownParent to a parent element did.

Answer 2

Fix it by removing or commenting on the following section of the CSS code in the select2.css or select2.min.css

.select2-container{
    width: 100% !important;
}

Answer 3

Try this body{overflow-x:hidden;}