Fit parent height for Table in Material UI?

Question

I want the table height to fit the parent’s available height. Ideally, I want:

• The footer to always be docked at the bottom of the parent container.

• If the table contains a few rows, the footer should remain docked at the bottom.

• If the table contains more rows than fit the parent’s height and needs to overflow then the overflow should be visible only for the table body, and the footer should remain docked at the bottom and not be pushed downwards.

• A flexbox approach if possible (it seems to me that this is a flex scenario)

What I don’t want:

• A height: 100vh approach

• A calc (100vh - ***px) involved (because I want to use the methodology in arbitrary component hierarchies inside my solution)

• Fixed heights in the table

• To use absolute/fixed positioning

• No 3rd party solutions (if possible)

• To use .offsetHeight

Example: https://stackblitz.com/edit/react-8h5dpy

Visual Examples:

Answer 1

Growing an item to take all available space but not exceeding the height of the parent could work like follows:

.parent {
   // use flexbox layout for children
   display: flex;
   flex-direction: column;
}
.childThatGrows: {
   // take as much space as available
   flex-grow: 1;        

   // don't take more space than available (elements are as high as their content by default)
   min-height: 0;       
   overflow: scroll;
}

Why min-height: 0? See https://stackoverflow.com/a/36247448/3066632.

For your example this might look like this: https://stackblitz.com/edit/react-wgbzpb.