javascript - CSS：如何使 Vue 选择选项溢出不包含在父元素的溢出中

Question

正如你在这张图片上看到的，我使用了 Vue-Select 和 Buefy Modal。我想要发生的是，如果选择有这么多会触发溢出（带有滚动）的选项超出父级的管辖范围，即您不必滚动父级的模式来查看选择的底部选项，而不是选择选项将与父项分离，您将能够在溢出时看到父项观点之外的选项。这是大多数选择/下拉元素的默认行为，但我希望有一种方法可以覆盖它。我希望它与此类似：

父级不应在子级溢出时调整大小。我尝试使用 z-index 无济于事。有没有任何 CSS hack 方法来实现这一点？

这是我的代码，没什么花哨的，只是 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 不起作用，我不知道如何复制第二张图片上的那个。