How to Contain a Bootstrap v5 Table in Main Div Content - html

Question

I have three Bootstrap v5 Tables that I want to be contained within the main body of my page. I am currently using Bootstrap Tabs in which the three different tables are contained separately. I have included one of my tables in my HTML example below.
My main body / content is defined by a div with the class="container custom". I have set it to have a height of 100vh in an attempt to have everything scale/fit within the viewport/browser height.
This is because I want to utilise the sticky table header and so the controls of the page aren't lost when the user scrolls to view certain table entries.
<div class="container custom flex-column">
<div class="row">
<div class="col m-auto p-3"><h1 class="text-center">Company Directory</h1></div>
</div>
<div class="flex-row p-3 mb-2" id="searchAndGo">
<div class="col flex-fill btn-group-sm">
<div class="input-group mb-3">
<input class="form-control" type="text" id="searchQuery" size="20" placeholder="Search Names">
<select id="locations" class="_locations">
</select>
<select id="departments" class="_departments">
</select>
<div class="float-end btn-group">
<button class="btn btn-success" id="startSearch" onclick="startSearch()">GO</button>
<button class="btn btn-danger" onclick="resetAll()">Reset</button>
</div>
</div>
</div>
<div class="flex-row text-center">
<div class="dropdown" id="dropDownContainer">
<button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Advanced Settings
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2" id="radioSelect">
<li><span class="dropdown-item-text">Search by:</span></li>
<li><span class="dropdown-item"><input class="custom-control-input" id="any" type="radio" value="any" name="name" checked><label for="any">Any</label></span></li>
<li><span class="dropdown-item"><input class="custom-control-input" id="forename" type="radio" value="forename" name="name"><label for="forename">Forename</label></span></li>
<li><span class="dropdown-item"><input class="custom-control-input" id="surname" type="radio" value="surname" name="name"><label for="surname">Surname</label></span></li>
</ul>
</div>
</div>
</div>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-personnel" role="tab">Personnel</a>
<a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-departments" role="tab">Departments</a>
<a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-locations" role="tab">Locations</a>
</div>
</nav>
<div class="tab-content container" id="myTabContent">
<div class="tab-pane fade show active table-responsive" id="nav-personnel" role="tabpanel" aria-labelledby="personnel-tab">
<button id="addEntry" class="btn btn-success" onclick="openAddModal()">Add Personnel</button>
<table class='table table-striped table-hover' id="companyDirectoryPersonnel">
<thead>
<tr>
<th scope="col">Full Name</th>
<th scope="col">Location</th>
<th scope="col">Department</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
</table>
</div>
I want to use the Bootstrap table-responsive class to add a scroll bar and have the table header scroll with the table.
I've tried fiddling around with different divs around the table but none of them seems to want to adhere to the container custom div set height. I've tried using different overflow css rules on the main container and divs around the different tables and none of them worked in the way I had hoped. I even tried inherit on height but I think there's too many divs between the tables and the main body content div
Here is my current CSS that is used in the image 1 above:
body {
background-color: #85daf1;
}
.custom {
display: flex;
background-color: hsl(47, 100%, 93%);
height: 100vh;
}