CSS: How to make Vue select option overflow not be included on the parent element's overflow

Question

As you can see on this image, I used Vue-Select and Buefy Modal. What I want to happen is that if the select has so many options which would trigger an overflow (with a scroll) be outside of the parent's jurisdiction i.e you won't have to scroll the modal of the parent to see the bottom of the select option, instead the select option will be like separated from the parent and you will be able to see the options outside the parent's point of view on overflow. This is the default behavior of most select/dropdown elements but I hope there is a way to override this. I want it to be similar to this:

The parent should not resize on child overflow. I tried using z-index to no avail. Is there any CSS hack way to achieve this?

This is my code, nothing fancy, just 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>

I removed my css changes since z-index doesn't work and I have no idea on how to replicate the one on the 2nd picture.