Material-UI tables get unintentionally stretched in Firefox 87+ and Chrome 91+

[dholbert]

Hi! Sorry for not filling out your issue-template; I'm just forwarding an issue that was reported to Mozilla which in fact seems to be something that you'll want to fix in your library (or perhaps already have). (I don't have Material UI locally and can't set up a dev environment to test its latest version etc.)

STEPS TO REPRODUCE:

1. View https://bug1700879.bmoattachments.org/attachment.cgi?id=9211715 in Firefox 87 (or newer), or in Chrome 91 dev (or newer), in a reasonably-tall browser window. This is a testcase that's written with Material-UI Tables.

EXPECTED BEHAVIOR:
The table and its cells are only intended to be as tall as their contents (as they are in earlier versions of Firefox and Chrome)

ACTUAL BEHAVIOR
The table stretches to fill the available height in the browser's viewport.

Firefox and Chrome both fixed a bug here, which is what's responsible for the new behavior. Previously, they failed to stretch <table> elements as flex items (which are supposed to be stretched by default [in the cross axis] via the default align-items:stretch behavior that flex cotainers have). That was a weird and unintentional quirk due to the way tables are represented internally.

It seems like Material-UI was inadvertently depending on this behavior.

You can get back the old behavior by styling these tables as align-self:flex-start -- you probably want to add that to any tables that live inside of flex containers, if the old behavior is what you're intending to get here.

[dholbert]

I suspect you want to add this to some Material-UI CSS stylesheet:

.MuiTableContainer-root { align-items: flex-start }

Or perhaps this (a little more targeted):

MuiTable-root { align-self: flex-start }

Either of these should restore the old behavior (either at the level of the flex container wrapper-element or the table as a flex item). If the table is the only thing that ever lives inside of a .MuiTableContainer-root, then these two solutions should be equivalent. If it might have non-table siblings, then you probably want the more-targeted approach with align-self.

[oliviertassinari]

@dholbert Do you have a reproduction in an isolated codesandbox? This style isn't coming from Material-UI:

[dholbert]

@dholbert Do you have a reproduction in an isolated codesandbox?

I don't, sorry. All I've got is the above-linked testcase from the reporter on https://bugzilla.mozilla.org/show_bug.cgi?id=1700879 .

This style isn't coming from Material-UI:

Aha - thanks, I should've picked up on the fact that the display:flex styling was in a rule with a different (non-Mui) classname associated with it.

in that case, I'll close this. Thanks in any case for having taken a look!