Bootstrap5中如何让.table-responsive表格自适应父div高度且不溢出

我使用Bootstrap 5进行开发，用带有.table-responsive类的div包裹table元素，在CSS中给.table-responsive设置height: 100%，预期它会占满父div的全部高度，但实际出现了父div溢出的问题。如果我把高度设为固定值例如300px，表格会变为响应式且出现垂直滚动条，但调整视口高度或浏览器窗口大小时无法动态适配，移动端依然会溢出。

JS动态生成表格代码示例 #

function populatePersonnelTable(data) {
    var directoryDiv = $("<div></div>").addClass("table-responsive").appendTo('#nav-personnel');
    var companyDirectoryPersonnel = $("<table></table>").attr("id", "companyDirectoryPersonnel").addClass("table table-striped table-hover").appendTo(directoryDiv);
    var directoryHead = $("<thead></thead>").appendTo(companyDirectoryPersonnel);
    var directoryBody = $("<tbody></tbody>").appendTo(companyDirectoryPersonnel);
    $('#companyDirectoryPersonnel tbody').empty();

    var directoryResult = data;

    $("<th></th>").text("Full Name").appendTo(directoryHead);
    $("<th></th>").text("Location").appendTo(directoryHead);
    $("<th></th>").text("Department").appendTo(directoryHead);
    $("<th></th>").text("Edit").appendTo(directoryHead);
    $("<th></th>").text("Delete").appendTo(directoryHead);

    directoryResult.forEach(function (entry){

     ... // GENERATING ROWS //

我最初是把<table>和<thead>直接写在HTML文件中，后来为了避免异常DOM错误，改为全部动态生成。

HTML文档结构参考 #

<body>

        <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 p-3" id="myTabContent">
                
                <div class="tab-pane fade show active" id="nav-personnel" role="tabpanel" aria-labelledby="personnel-tab">

                    <button id="addEntry" class="btn btn-success" onclick="openAddModal()">Add Personnel</button>

                </div>

当前使用的CSS代码 #

body {
    background-color: #85daf1;
    height: 100vh;
}

.custom {
    background-color: hsl(47, 100%, 93%);
    height: 100%;
}

.table-responsive {
    height: 100%;
}

效果截图 #

当我设置固定height如300px时的效果如下：

.custom是浅黄色的主内容div。为什么我的响应式表格一直溢出？如果我设置overflow: hidden，内容无法访问，也不会生成滚动条。

开发者工具面板截图如下：

我也尝试过将#myTabContent的CSS高度设置为100%或者固定像素值，依然会出现溢出问题，看起来height: 100%是直接取了父div的精确像素高度，而不是自适应占满父容器高度并适配布局。

内容的提问来源于stack exchange，提问作者Ranisimo