I have datatables inside of bootstrap cards, but when the table is larger than the height of the card, it will exceed outside of the card. I have an overflow: auto on a table-wrapper which also does not trigger once exceeding the cards height.
heres a simplified example: https://stackblitz.com/edit/js-bootstrap4-gbnhfx?file=style.css
I've forked you stackblitz (https://stackblitz.com/edit/js-bootstrap4-tsnbuq)
I've used a style attr here for simplicity. But the inner div is the item being overflowed, and then your outer div (which you have CSS which handles overflow) is adding scroll.
Here is the main change:
<div class="table-wrap">
<div style="height:690px">
<table class="table table-sm table-dark table-striped">
<thead>
</thead>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</div>
</div>