Why does setting a maxHeight for muiTableProps interfere with sticky header?

[imnasnainaec]

I encountered an issue in which I had specified
muiTableProps: { sx: { maxHeight: "400px" } },
and the result was that when you scrolled the table down more than ~400px, the sticky header would unstick.
Here's the issue reproduced by minimally modifying the Enable Sticky Header and Footer Demo: https://codesandbox.io/p/devbox/tender-currying-8yk6cm

I'm not posting this as a GitHub Issue because the problem is avoided by switching from muiTableProps to muiTableContainerProps. But I'm posting it here:

1. because I don't understand the behavior and am unsure whether it's a bug that should be resolved; and
2. in case anybody else has the same problem.

[KevinVandy]

@imnasnainaec It's simply because you should only be adding a max-height on the table conatiner div instead of the <table> element itself.

 muiTableContainerProps: { sx: { maxHeight: "400px" } },

is the proper way to add a max-height to the table

[imnasnainaec]

I guess the Table should be allowed to be larger for various scroll behaviors and component interactions and the Container is meant to enforce the location and size of the table as viewed by the user.

[nimo23]

Remember: When using percentages, we need both, e.g.

muiTablePaperProps: { sx: { height: '100%' } },
muiTableContainerProps: ({table}) => ({
    sx: { height: `calc(100% - ${table.refs.topToolbarRef.current == null ? 0 : 
            table.refs.topToolbarRef.current?.offsetHeight}px 
           - ${table.refs.bottomToolbarRef.current == null ? 0 :    
           - table.refs.bottomToolbarRef.current?.offsetHeight}px)`
          }
}),