Variable sizes on a fixed layout with scrolling - html

Question

I've run into an issue with the page I'm working on. The basic idea of the page is it is a list of items and you click a row to go the a details page for that item, fairly straight forward. My issue is with the CSS.
Basically almost everything on the page is static (doesn't scroll) and just the stuff in the table scrolls (yes, I hid the scroll bar). I was able to accomplish this using a good bit of positin:fixed; but now I've got a problem.
Each category has its own page with a table (categories are the links on the left side). Some categories require extra buttons along the top, like a second row of blue pill buttons. The problem is that the second row of buttons makes the top area larger so the table has to be smaller. But, since most of the page is position:fixed; the size of the scrolling table is based on the sizes of the fixed regions around it using `height:calc(100vh - 170px);' But when there is a second row of buttons the 170px no longer works.
So here is the question: Is there a way to accomplish the scrolling behavior required via pure css with a variable sized row of buttons?
I've tried several things including flexbox but in the end I can't seem to get this to work without setting the height of the table body using the calc function.

Answer 1

It sounds like what you need is flexbox. You have a header section that determines the height of a content section, essentially. Flex columns with grow/shrink parameters accomplish this.
.container {
bottom: 0px;
display: flex;
flex-direction: column;
left: 0px;
position: absolute;
right: 0px;
top: 0px;
}
.container > .header {
background: yellow;
flex-shrink: 1;
}
.container > .content {
background: black;
color: white;
flex-grow: 1;
}
<div class="container">
<div class="header">
Header content<br>
This will keep expanding in height.
</div>
<div class="content">
The height of this black content box depends on the height of the header above.
</div>
</div>