I'm trying to get a MUI DataGrid working in a Flexbox, so that it will exactly fill the remaining space. Specifically, something like this:
---------------------------| Header |---------------------------| Table Header ^|| Row ||| Row ⌄|| Total Rows: 9|---------------------------| Fixed Footer |---------------------------The problem is, I want it so that the footer is always at the bottom of the window, and the DataGrid is exactly in the space between the header and footer no matter how many rows.
I've managed to hack something together that works if the number of rows are less than the available space, but as soon as the number of rows exceeds the amount of space then the flexbox allows the table to just expand as needed, off the bottom of the screen.
I can also get it to work if I give the element containing the DataGrid a fixed height - then I get a scrolling table and all is good. But that requires me to start computing the correct height for the element every time the window resizes.
Is there any way to get this to work without anything like this?
Note: I'm in no way wedded to Flexbox. It just seemed like the correct way to get something to fill the remaining space. If there's a better option I'll do that :)
Cheers