Make Table Fill Remaining Height

I'm trying to go for a margin/padding-less design. I am able to do most of what I need like this. I have:

  • Main frame with "expand content to fill width"
    • Container with the "Customers" header with no padding
      • Table in the container's body with no margin

The problem is that if I set a fixed height on the table, it doesn't work on all screen sizes, and if I set the auto height, it drops below the bottom of the main frame's container so there are two scroll bars, one for the table, one for the container holding the table. It's as if the table's height is being set to the full viewport height, but since there's some nav bars above the table, it pushes the table down below the container height.

Any solutions to get a table (or any component) to fill the remaining height? Kind of like a flex grow type of thing?

We have a feature request on file for better support on auto height tables in different viewport sizes. I'll reach back out if I get any updates

1 Like