Set child's height fixed to parent height

There is a div which fills up the height of page. Then there is a table which needs to fill up the divs height. I need the tbody to get a scrollbar when it exceeds the height of table.

Here is my code:

<div class="wrapper">
  <table class="data-table">
    <thead>
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Data 11</td>
      <td>Data 12</td>
    </tr>
    <tr>
      <td>Data 21</td>
      <td>Data 22</td>
    </tr>
    </tbody>
  </table>
</div>

.wrapper {
  height: calc(100vh - 190px);
  overflow: hidden;
  /* should not get scrollbar */
}

.data-table {
  /* needs to fill up wrapper height */

  tbody {
    /* needs to fill up table height and get scrollbar */
  }
}

I've tried the code below but did not succeed:

.wrapper {
  height: calc(100vh - 190px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.data-table {
  height: 100%; /* and also inherit */
  
  tbody {
    height: 100%; /* and also inherit */
    overflow: auto;
  }
}