How to let a bootstrap container use the remaining viewport space?

Question

I know there are a number of similar posts, but I am unable to apply them to my issue.

I have a table in the last row of a bootstrap grid:

<div class="container-fluid">
    <!-- Here are some other rows with dynamically varying sizes -->
    <div class="row">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Size (byte)</th>
                        <th>Loaded</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var file in _filesToUpload)
                    {
                        <tr>
                            <td>@file.Name</td>
                            <td>@file.FileType</td>
                            <td>@file.FileSize</td>
                            <td>@file.Loaded.ToString()</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

The corresponding css looks like this:

.table {
    color: white;
    background-color: rgba(0, 0.941, 0, 0.5);
}

.table-responsive {
    height: 40rem;
    overflow: auto;
}

thead tr:nth-child(1) th {
    background-color: black;
    position: sticky;
    top: 0;
    z-index: 10;
}

The whole thing is within a .page container and a main container (this is blazor default project setup):

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4 auth">
            <LoginDisplay />
        </div>

        <div class="content px-4">
            @Body <!-- here the code from above gets inserted -->
        </div>
    </div>
</div>

And lastly I have the following css for the page and main class.

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    background-color: transparent;
}


.main {
    flex: 1;
    background-image: url(../web/wallpaper.jpg);
    background-repeat: no-repeat;
    background-position: top 0 right 0;
    background-size: cover;
    background-attachment: fixed;
}

What I would want to have is that the background is fixed in place and all content, that gets too big, gets a scrollbar. With the above code, this works fine as long as I'm in full-screen/ full HD mode. As soon as the browser gets resized, the table will 'stick out' of the bottom of the page (the whole page gets an additional scrollbar and one can scroll down below the background image).

The solution must be to use a dynamic height in the table-responsive class, but I'm unable to find the correct way to do it.