Javascript CSS：如何使Vue选择选项溢出不包括在父元素的溢出中

正如您在这张图上看到的，我使用了Vue Select和Buefy Modal。我想发生的是，如果select有太多选项，这些选项会触发溢出，滚动超出父级权限，即您不必滚动父级的模式来查看select选项的底部，取而代之的是，选择选项将类似于与父对象分离，您将能够在溢出时看到父对象视角之外的选项。这是大多数选择/下拉元素的默认行为，但我希望有一种方法可以覆盖它。我希望它与此类似：

父级不应在子级溢出时调整大小。我试着使用z-index，但没有用。有没有CSS黑客的方法来实现这一点

这是我的代码，没什么特别的，只是buefy+v-select

<b-modal
    class="assign-modal"
    :active.sync="open"
    :can-cancel="false"
    has-modal-card
  >
    <div class="card">
      <div class="modal-card-body">
        <form
          class="assign-form"
          @submit.prevent="submit"
        >
          <div class="column">
            <h3>Update Service</h3>
            <hr>
          </div>
          <div class="column no-top-padding">
            <div class="columns">
              <div class="column">
                <b-field label="Name">
                  <v-select
                    :filterable="false"
                    :options="options"
                    @search="searchClient"
                  >
                    <template slot="no-options">
                      Type to search for an existing client.
                    </template>
                    <template
                      slot="option"
                      slot-scope="option"
                    >
                      <b-dropdown-item
                        :value="option.id"
                        aria-role="listitem"
                      >
                        <span>{{ `${option.first_name} ${option.last_name}` }}</span>
                      </b-dropdown-item>
                    </template>
                    <template
                      slot="selected-option"
                      slot-scope="option"
                    >
                      {{ `${option.first_name} ${option.last_name}` }}
                    </template>
                  </v-select>
                </b-field>
              </div>
            </div>
            ...
</b-modal>

---

我删除了我的css更改，因为z-index不起作用，我不知道如何复制第二张图片上的更改。

你成功地做到了吗？我在modal内的b-taginput也有同样的问题。你找到解决办法了吗？