How to have a scrollable table which takes the height from it's parent (HTML + Bootstrap)

I'd like to make a table vertically scroll using the standard overflow: auto, but not have to set a height on the table's container.

Bootstrap has a built in class table-responsive to handle horizontal scrolling, but I can't work out how to make vertical scrolling without a max height directly on the table's container.

Here's the basic HTML and 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>

and here is a codepen of the full card: https://codepen.io/Daggett/pen/wvvJxpp

As you can see if you add more tr rows to the table, there is no scrolling.