How to make table fill parent div height but not exceed - html

Question

Problem:
I have a <table> element that I want to dynamically fill 100% of a container's height, without exceeding.
Background:
When the <table> exceeds the container height, I want to be able to scroll through the table-rows. I do not want information above the table to be scrolled off the page.
When my <table> height exceeds the container, the container gets the scroll-bar, and not the <table> itself. This scrolls information above the table off of the page.
Limitations:
I am using <table> elements and do not want to use the <div> display: table approach.
I would also like this to be dynamic, and not set the height to a hard pixel count.
HTML:
<div class="demo-container">
<div class="demo-header">Don't scroll me off the page please</div>
<div class="demo-container>
<div class="table-container">
<table>
<thead>
<tr>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rows are populated via API and will expand the table height</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
.demo-container {
height: 100%
display: grid;
grid-area: body;
grid-template-areas:
'demo-header'
'demo-container';
grid-template-rows: 60px 1fr;
}
.demo-header {grid-area: demo-header;}
.demo-container {grid-area: demo-container;}
.table-container {
height: 100%
overflow-y: auto;
}
I know that if I set the .table-container's height to pixels, and set overflow-y: auto, I can achieve the desired look.
However, I do not want to do this with pixel heights, and would like a more responsive solution in case things change on the page. Is there any way to do this without exact pixel heights?
Thanks

Answer 1

Here's how you might go about it. How you set up the outer element depends on your overall page structure.
html,
body {
height: 100vh;
margin: 0;
padding: 0;
}
.demo-container {
display: flex;
flex-direction: column;
max-height: 100%;
}
.demo-header {
flex: none;
}
.table-container {
overflow: auto;
}
table {
background: pink;
}
td {
padding: 15px;
border: 1px solid #fff;
}
<div class="demo-container">
<div class="demo-header">Don't scroll me off the page please</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
<tr>
<td>Pretend that this expands the table height past the container</td>
</tr>
</tbody>
</table>
</div>
</div>