При нажатии select2 автоматически появляется горизонтальная полоса прокрутки

Question

Я использую select2 и bootstrap. Каждый раз, когда я нажимаю кнопку select2, моя страница расширяется и появляется горизонтальная полоса прокрутки. Как решить эту проблему:

Это мой HTML-код

<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>

Это мой код JS

    $(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

Попробуйте это тело {overflow-x: hidden;}