How to make the table body scrollable with dynamic height and fixed table header

Question

i want to add a follow up according to question How to keep table headers fixed while scrolling down a table So basically i need to make the tbody scrollable, while making thead fixed during scrolling.

The original solution that works

$(function() {
    for (var i = 0; i < 20; i++) {
        var a = Math.floor(10 * Math.random());
        var b = Math.floor(10 * Math.random());
        var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
                           .append($("<td>").html(a + b));
        $("tbody").append(row);
    }
});

.parent {
    background: blue;
    height: 200px;
}

table {
    background-color: #aaa;
}
tbody {
    background-color: #ddd;
    height: 100px;
    /*height: calc(100% - 50px); This not working */
    overflow: auto;
}
td {
    padding: 3px 10px;
}

thead {
    height: 50px;
}
thead, tbody{
    display:block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent'>
  <table>
      <thead>
          <tr>
              <td>Problem</td>
              <td>Solution</td>
          </tr>
      </thead>
      <tbody>
      </tbody>
  </table>
</div>

However, what is bugging me is for this solution, it requires the tbody to have a fixed height ( in pixel). Whereas in my case, i want to make it to have the height of parent minus the height of thead. I tried to use calc(100% - 50px) but it not working.

Can somebody explain to me

1.why calc is not working in here, but only fixed number of pixel works

2. Is there any way to fixed thead while scrolling tbody and making tbody height dynamically expand to all the space of parent's height (no need setting fixed height).

Thanks alot.