HTML Table filling full height of parent div with scrolling

I have a Blazor component which is just a html table. I want to style the table so that it always fits into the parent div of the component. The rows have a fixed size, so if the table has more rows than could fit in the parent div, it should still be at maximum the size of the parent div, while allowing scrolling in the body. If it is less than the parent div the space should be left blank. I want to reuse the component in different places, so I want to avoid fixed values.

This is the blazor component:

@using KickerTracker.Data@using Microsoft.EntityFrameworkCore@inject KickerDbContext DbContext@inject IStringLocalizer<Locals> Localizer<table><thead><tr><th>@Localizer["Place"]</th><th>@Localizer["Date"]</th><th>Team 1</th><th>@Localizer["Score"]</th><th>Team 2</th><th><i class="fa-solid fa-pen"></i></th></tr></thead><tbody>    @if (Matches?.Count > 0)    {        foreach (var m in Matches)        {            _count++;<tr><td>@_count</td><td>@m.Date.ToString("dd.MM.yyyy")</td><td>                    @m.Team1.Player1.Name <br/>                    @if (m.Team1.Player2 is not null)                    {<span>@m.Team1.Player2.Name</span>                    }</td><td class="score">                    @m.Team1Score - @m.Team2Score &nbsp;                    @if (m.ToZero())                    {<i class="fa-solid fa-sack-dollar" style="color: #F13C5C;"></i>                    }                    else                    {                        if (m.ToOne())                        {<i class="fa-solid fa-sack-dollar" style="color: #3F5380"></i>                        }                    }</td><td>                    @m.Team2.Player1.Name <br/>                    @if (m.Team2.Player2 != null)                    {<span>@m.Team2.Player2.Name</span>                    }</td><td><button class="updateButton"><i class="fa-solid fa-pen"></i></button></td></tr>        }    }    else    {<tr><td></td><td></td><td colspan="4"><h3>                    No games played yet</h3></td></tr>    }</tbody></table>

This is the current css:

h2 {    text-align: center;    color: #444;}table {    width: 100%;    margin: 0 auto;    border-collapse: collapse;    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);    background-color: #fff;}th, td {    padding: 12px 15px;    text-align: left;    border-bottom: 1px solid #ddd;}th {    background-color: #fa6400;    color: #fff;    text-transform: uppercase;    letter-spacing: 0.1em;}tr:hover {    background-color: #f1f1f1;}tr:nth-child(even) {    background-color: #f9f9f9;}.updateButton{    background-color: transparent;    border: 3px solid #fa6400;    border-radius: 5px;;    color: #fa6400;}.score{    font-weight: bold;}@media (max-width: 768px) {    table {        width: 100%;    }    th, td {        padding: 10px 8px;    }}

I tried to ask ChatGPT, which was unable to provide a solution. Is this even possible? I would like to avoid JavaScript if it is not necessary.