[data grid] Incorrect table height if height is inherited

[ithrforu]

Search keywords

height="100%", flex-grow="1", flexGrow="1", table height, table flex height, inherited height

Latest version

• I have tested the latest version

Link to live examples:

• 6.2.0
• 6.2.1, changelog
• latest version

Current behavior

Table does not adjust to page height if height is inherited (the entire page has scrolling): latest.webm.

Expected behavior

Table adjust to page height if height is inherited (only table has scrolling): 6-2-0.webm.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID or Support key 💳 (optional)

72020

[michelengelen]

Hey @ithrforu the latest version link is not working (sandbox is not public) ... could you update that please? Thanks!

[ithrforu]

@michelengelen, hey!
Thanks, I updated the link.

[michelengelen]

This seems like a problem with the Box component.
When you remove the wrapping <Box flexGrow={1}> it works as expected: DEMO

@mnajdova WDYT?

[ithrforu]

Yes, but i need <Box flexGrow={1}> (more often Stack) for another layout above a table.

[michelengelen]

Ok, found a solution.
<Box flexGrow={1} sx={{ minHeight: 0 }}> works perfectly fine! :D

[ithrforu]

@michelengelen, thanks, thats works.

But why its broken in 6.2.1?

[michelengelen]

Not sure why ... let me check

[michelengelen]

probably due to #8091

[michelengelen]

but, since this issue is fixed (or at least with a reasonable workaround) I will close it here!

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@ithrforu: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[ithrforu]

@michelengelen, yes, i watched #8091, but still don't understand the reason.

I'd like to figure it out.

[ithrforu]

@michelengelen, 👋