Skip to content

[data grid] Document responsive height values and test flex column parents without a height - #23750

Closed
JCQuintas wants to merge 5 commits into
mui:masterfrom
JCQuintas:jcq/height-prop-followups
Closed

JCQuintas wants to merge 5 commits into
mui:masterfrom
JCQuintas:jcq/height-prop-followups

Conversation

@JCQuintas

Copy link
Copy Markdown
Member

Summary

Stacked on #23745. Only the last commit (11a3ff6) is new; the other commits come from #23745.

  • Docs: the "Height prop" section now shows how to get a responsive height. An sx height override loses to the minHeight and maxHeight that the prop sets, so pass a CSS variable to the prop and set the variable with sx breakpoints.
  • Tests: remove "should let sx override the height prop". It passed minHeight together with height, which the docs now tell users not to rely on.
  • Tests: cover a flex column parent without a height. With flex: 1 (basis 0%), min-height alone holds the height there. The new test fails when the root uses minHeight: 0.

LukasTy and others added 5 commits October 2, 2026 12:06
With the `height` prop, the root used `flex: 1 0 auto`. In a flex row
parent, flex-shrink: 0 keeps the root at its content width, so the grid
overflows a parent that is narrower than its columns. The root now uses
`flex: 1`, and `minHeight` with `maxHeight` hold the height instead.

This also fixes the flaky HeightGrid screenshot. The grid overflowed the
500px centered regression box and sat at a half pixel (x = -100.5).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…parents without a height

Point users who need a responsive height to a CSS variable, since `sx` height overrides lose to the min and max height the prop sets. Remove the sx override test that contradicts the docs, and cover a flex column parent without a height, where min-height alone holds the height.
@JCQuintas JCQuintas added docs Improvements or additions to the documentation. scope: data grid Changes related to the data grid. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Oct 2, 2026
@JCQuintas JCQuintas self-assigned this Oct 2, 2026
@code-infra-dashboard

Copy link
Copy Markdown

Deploy preview

Bundle size

Bundle Parsed size Gzip size
@mui/x-data-grid 🔺+31B(+0.01%) 🔺+5B(0.00%)
@mui/x-data-grid-pro 🔺+31B(+0.01%) 🔺+8B(0.00%)
@mui/x-data-grid-premium 🔺+31B(0.00%) 🔺+6B(0.00%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-charts-premium 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)
@mui/x-scheduler 0B(0.00%) 0B(0.00%)
@mui/x-scheduler-premium 0B(0.00%) 0B(0.00%)
@mui/x-chat 0B(0.00%) 0B(0.00%)
@mui/x-license 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@JCQuintas JCQuintas closed this Oct 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to the documentation. scope: data grid Changes related to the data grid. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants