在Firefox中，下拉列表显示的是顶部而不是底部

Question

我正在使用Bootstrap 4卡和框架select2。我在卡体内有一个基本的下拉菜单，但这显示在Firefox的顶部。但是，在Google Chrome浏览器中工作正常。我不明白为什么。如何在不设置高度的情况下显示底部？

   <div class="card-body">
    <div class="form-row">
      <!--<label for="email" class="mr-sm-2">CIF:</label>
      <input type="email" class="form-control mb-2 mr-sm-2" id="email">-->


      <select class="js-example-responsive js-example-basic-single" style="width: 50%">

        <optgroup label="...">
          <option>...</option>
          ...
      </select>

      <script>
        $(document).ready(function () {
          $('.js-example-basic-single').select2();
        });
      </script>
    </div>
  </div>

谢谢。