设置表格高度为25%，并在引导中添加垂直滚动条

我试图在一个网页的顶部创建一个部分，将显示2状态表并排。我有这个设置，但我无法得到一个元素的工作-添加一个垂直滚动到右边的表。

我希望表格最多占用25%的视口高度，当数据超过该大小时，在右侧表格上有一个垂直滚动(左侧表格数据应该保持小)。这样做的原因是，将有其他项目添加到页面下面的表。

我能够得到一个垂直滚动的工作，如果我手动设置表格为一定的像素高度，但这是不希望的，因为我希望它是响应屏幕大小。

我的页面是使用Bootstrap 5和jQuery 3.6.

这里是一个尝试的例子，你也可以使用这个小提琴

<div class="page-body">
<div class="container-fluid h-25">
<div class="row justify-content-around h-25">
<div class="col">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="2" style="text-align:center">System Status</th>
</tr>
<tr>
<th>Active Jobs</th>
<th>Queued Jobs</th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
</tbody>
</table>      
</div>
<div class="col overflow-scroll">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="3" style="text-align:center">Recently Executed Tasks</th>
</tr>
<tr>
<th>Job</th>
<th>Task</th>
<th>Start Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
...many more rows...
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

CSS

.page-body {
width:100vw;
height:100vh;
}

表不是保持我所希望的25%的视图，而是扩展到填充整个页面。有什么建议来解决这个问题吗?

<div class="page-body">
<div class="container-fluid h-25">
<div class="row">
<div class="col-md-6 overflow-scroll" style="height:200px;">
<table class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>      
</div>
<div class="col-md-6 overflow-scroll" style="height:200px;">
<table class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>

</div>
</div>
</div>