我想使用标准溢出：auto使表垂直滚动，但不必在表的容器上设置高度。
Bootstrap有一个内置的类表，可以处理水平滚动，但如果没有直接在表的容器上设置最大高度，我就无法实现垂直滚动。
这是基本的HTML和BS:
<div class="card card-bordered m-3 w-50" style="height: 400px">
<div class="card-body px-3 pt-2 pb-0">
<div class="table-responsive" style="overflow: auto">
<table class="table table-bordered table-sm mb-0">
<thead>
这是完整卡片的代码笔：https://codepen.io/Daggett/pen/wvvJxpp
正如您所看到的，如果向表中添加更多的tr行，则不会出现滚动。
我已将height:400px移动到"卡体"，并将height:100%应用到table-responsive。这样，表头可以保持固定高度，表可以扩展到父级的400px高度。
https://codepen.io/anijack/pen/YzzZOWE
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card card-bordered m-3 w-50">
<!-- Can use w-25, w-50, w-75, w-100 to set width - use max-height CSS to set the height of the card -->
<div class="card-header px-3 pt-2 pb-0 d-flex justify-content-between align-items-center" style="height: 44px">
<!-- Fix the height of the header -->
<h4 class="mb-0">Visualize data</h4>
</div>
<div class="card-body px-3 pt-2 pb-0" style="height: 400px">
<div class="table-responsive" style="overflow: auto;height:100%;">
<table class="table table-bordered table-sm mb-0">
<thead>
<tr>
<th class="text-nowrap" scope="col">
Tenor
<button class="btn btn-flat-primary btn-sm ml-2">
<i class="icon">add</i>
</button>
</th>
<th class="text-right px-3" scope="col">1Y</th>
<th class="text-right px-3" scope="col">2Y</th>
<th class="text-right px-3" scope="col">3Y</th>
<th class="text-right px-3" scope="col">5Y</th>
<th class="text-right px-3" scope="col">8Y</th>
<th class="text-right px-3" scope="col">10Y</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-secondary text-nowrap" scope="row">
01 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
02 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
03 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
04 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
04 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
04 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
04 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
04 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
04 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
04 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
04 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
04 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
<tr>
<th class="text-secondary text-nowrap" scope="row">
04 Mar 19
</th>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
<td class="text-right px-3">00.00</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer px-3 py-0 border-top d-flex justify-content-between align-items-center" style="min-height: 48px">
<button class="btn btn-link px-1">Clear</button>
</div>
</div>找到解决方案：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="w-50 border m-5 d-flex flex-column" style="height: 400px; flex-shrink: 0; flex-grow: 0">
<!-- Header takes height of content, height is fixed by flex-shrink and flex-grow -->
<div class="d-flex justify-content-between align-items-center p-3" style="flex-shrink: 0; flex-grow: 0">
<h4 class="mb-0">Title</h4>
</div>
<!-- Can add more divs with height taken from their content, fixed with flex -->
<div class="mb-2 px-3 d-flex align-items-center" style="flex-shrink: 0; flex-grow: 0">
<input type="text" class="form-control" placeholder="input">
</div>
<!-- Now set body that has the variable size, using flex-grow-1 to fill the space -->
<div class="d-flex flex-grow-1">
<!-- Set overflow -->
<div class="mx-3" style="overflow: auto">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam vestibulum morbi blandit cursus risus. Consequat nisl vel pretium lectus quam. Commodo ullamcorper a lacus vestibulum sed.
Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Aliquet bibendum enim facilisis gravida neque convallis a cras. Pulvinar mattis nunc sed blandit libero. Euismod
lacinia at quis risus sed vulputate odio ut. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Tellus pellentesque eu tincidunt tortor aliquam nulla. Euismod elementum nisi quis eleifend quam adipiscing vitae proin.
Nisi porta lorem mollis aliquam ut porttitor leo. Leo duis ut diam quam nulla porttitor massa id. Tristique risus nec feugiat in fermentum posuere. Diam sit amet nisl suscipit adipiscing bibendum. Duis convallis convallis tellus id interdum velit.
Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Nec dui nunc mattis enim ut tellus elementum. Bibendum enim facilisis gravida neque. Nec tincidunt praesent semper feugiat nibh. Adipiscing bibendum est ultricies integer
quis. Ridiculus mus mauris vitae ultricies leo integer. Ac felis donec et odio pellentesque diam volutpat commodo. Sagittis aliquam malesuada bibendum arcu. Tellus in hac habitasse platea dictumst vestibulum. Urna condimentum mattis pellentesque
id nibh tortor. Augue interdum velit euismod in pellentesque massa. Viverra nibh cras pulvinar mattis nunc sed. Aliquet nibh praesent tristique magna sit amet purus gravida quis. Lacinia quis vel eros donec ac odio tempor. Enim blandit volutpat
maecenas volutpat. Cursus sit amet dictum sit amet justo donec enim diam. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Tempor id eu nisl nunc. Pretium aenean pharetra magna ac. Duis at tellus at urna. Leo integer malesuada
nunc vel risus commodo viverra maecenas accumsan. Eu volutpat odio facilisis mauris sit amet massa vitae tortor. Elit eget gravida cum sociis natoque penatibus et magnis dis. Vitae justo eget magna fermentum iaculis eu non. Ipsum faucibus vitae
aliquet nec. Sed vulputate mi sit amet mauris commodo quis. Volutpat lacus laoreet non curabitur gravida arcu. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Ultricies lacus sed turpis tincidunt id aliquet. Sed velit dignissim sodales
ut eu sem. Et leo duis ut diam quam. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Cursus in hac habitasse platea dictumst quisque. Ac felis donec et odio pellentesque diam. Urna neque viverra justo nec ultrices. Vel orci porta non pulvinar.
Id diam vel quam elementum. Egestas erat imperdiet sed euismod nisi. Ut ornare lectus sit amet est placerat. Adipiscing at in tellus integer feugiat. Magna etiam tempor orci eu lobortis. Eget nullam non nisi est sit. Id diam vel quam elementum
pulvinar. Massa eget egestas purus viverra accumsan in nisl. Urna et pharetra pharetra massa. Velit egestas dui id ornare. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Duis at tellus at urna condimentum mattis pellentesque.
Ut etiam sit amet nisl purus in mollis nunc. Risus nec feugiat in fermentum posuere. Feugiat in ante metus dictum. Arcu non odio euismod lacinia at. Enim nunc faucibus a pellentesque sit amet. Enim diam vulputate ut pharetra sit amet aliquam.
Venenatis tellus in metus vulputate eu scelerisque felis. Ultricies integer quis auctor elit. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Sollicitudin aliquam
ultrices sagittis orci a. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Diam in arcu cursus euismod quis viverra nibh. Egestas dui id ornare arcu odio. Interdum velit laoreet id donec ultrices tincidunt arcu non. Scelerisque varius
morbi enim nunc faucibus a pellentesque sit. Rhoncus aenean vel elit scelerisque mauris pellentesque. Venenatis urna cursus eget nunc scelerisque. Interdum consectetur libero id faucibus nisl tincidunt eget. Arcu cursus euismod quis viverra nibh
cras pulvinar mattis nunc. Arcu vitae elementum curabitur vitae nunc sed velit. Ut porttitor leo a diam sollicitudin tempor id eu nisl. Est sit amet facilisis magna etiam tempor orci eu. Ac turpis egestas integer eget aliquet. Vel orci porta non
pulvinar neque laoreet suspendisse interdum consectetur. Auctor eu augue ut lectus arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Vulputate odio ut enim blandit. Sed ullamcorper morbi tincidunt ornare massa. Scelerisque felis imperdiet
proin fermentum leo vel orci.
</p>
</div>
</div>
<div class="px-3 py-2 border-top" style="flex-shrink: 0; flex-grow: 0">
<p class="mb-0">Footer</p>
</div>
</div>有必要在内容容器中添加d-flex-flex-grow，然后在内容上设置溢出：auto。
要固定不可变零件的高度，请弯曲收缩：0；flex growt:0是停止调整大小所必需的。