Dropdown menu causes scrolling - css

Question

I have a dropdown menu inside one of the columns in a table. When it is exposed, it is either cut off (overflow-hidden) or created a scroll bar (overflow-visible).
How would I get this to just appear over top of the table (or "extend" a parent div so it's all visible) so that the only scroll bar is the usual one in the browser, not this table-specific scroll bar. Code provided below.
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow border-b border-gray-200 sm:rounded-lg overflow-auto">
<div class="flex flex-wrap m-4 justify-between">
<div class="flex items-center">
<div class="beep-label">
#lang('livewire.per_page'):
</div>
<select wire:model="perPage" class="beep-input align-middle w-auto inline-block">
<option>10</option>
<option>15</option>
<option>25</option>
</select>
</div>
<div class="flex">
<div class="beep-label pr-2 flex justify-center items-center h-full text-center">
#lang('one-word.filter'):
</div>
<input wire:model="search" class="beep-input" type="text" placeholder="#lang('livewire.search_users')...">
</div>
</div>
<table class="divide-y divide-gray-200 w-full">
<thead>
<tr>
<th class="beep-table-header h-full align-middle flex">
<div class="align-middle justify-items-auto">
<a wire:click.prevent="sortBy('name')" role="button" href="#" class="">
#include('livewire.includes._sort-icon', ['field' => 'name'])
<div class="inline-block">#lang('one-word.name')</div>
</a>
</div>
</th>
<th class="beep-table-header">
<a wire:click.prevent="sortBy('users.email')" role="button" href="#" class="">
#include('livewire.includes._sort-icon', ['field' => 'users.email'])
#lang('users.beep_email')
</a>
</th>
<th class="beep-table-header">
<a wire:click.prevent="sortBy('beep_extension')" role="button" href="#" class="">
#include('livewire.includes._sort-icon', ['field' => 'beep_extension'])
#lang('livewire.beep_ext')
</a>
</th>
<th class="beep-table-header text-center">
#lang('one-word.action')
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
#foreach ($contacts as $contact)
<tr #if ($contact->is_active !== true) class="table-danger" #endif>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
#if ($contact->contactable->thumbnail)
<img class="h-10 w-10 rounded-full"
src="{{ $contact->contactable->thumbnail }}"
alt="">
#else
<x-nav.svg-icons icon="user-circle" class="w-3 h-3" />
#endif
</div>
<div class="ml-4">
<div class="text-sm leading-5 font-medium text-gray-900">
{{ $contact->name }}
</div>
<div class="text-sm leading-5 text-gray-500">{{ $contact->contactable->email }}</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="text-sm leading-5 text-gray-900">{{ $contact->beep_mail }}</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="text-sm leading-5 text-gray-900">{{ $contact->beep_extension }}</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap text-center text-sm leading-5 font-medium">
<div x-data="{ open: false }" #keydown.window.escape="open = false" #click.away="open = false" class="relative inline-block text-left">
<div>
<span class="rounded-md shadow-sm">
<button #click="open = !open" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" aria-expanded="true">
#lang('one-word.action')
<!-- Heroicon name: chevron-down -->
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>
</div>
<div x-show="open" x-description="Dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg z-10">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
#can ('view', $contact->contactable)
#lang('users.view_profile')
#endcan
#can ('update', $contact->contactable)
#lang('one-word.edit')
#lang('livewire.edit_contact_methods')
{{ $contact->is_active ? __('one-word.deactivate') : __('one-word.activate') }}
#endcan
</div>
</div>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
<div class="p-2 uppercase text-sm bg-gray-200">
{{ $contacts->links() }}
</div>
</div>
</div>
</div>
</div>
And the extracted css components in case they are helpful:
.beep-label {
#apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
}
.beep-input {
#apply appearance-none block w-full text-gray-700 border border-gray-500 rounded py-1 px-2 mb-3;
}
.beep-table-header {
#apply px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider;
}