I am seeking a solution to create a table that fills the remaining height without causing a vertical scroll in the browser. My goal is for the table itself or its container to have a vertical scroll instead.
I found guidance from another post on how to make a div fill the height of the remaining screen space: Make a div fill the height of the remaining screen space
To achieve this, I attempted to enclose the table within a container div and set it to 100% max-height, but unfortunately, this approach did not work:
html,
body {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 2px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
background-color: deeppink;
}
.box .row.content {
flex: 1 1 auto;
background-color: violet;
}
table,
th,
td {
border: 1px solid black;
}
#table-container {
background-color: yellow;
max-height: 100%;
overflow-y: scroll;
}<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b> (fills remaining space)
</p>
<div id="table-container">
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
// Additional rows of data...
</tbody>
</table>
</div>
</div>
</div>It is important to note that there are other elements within the row containing the table, like the <p> in the code snippet, and below it lies the table container.