The horizontal scroll bar automatically appears when clicking select2

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;
                }
            }
        });
    });

Try this body{overflow-x:hidden;}