[DataGridPro] Incorrectly inheriting height from CSSGrid / Flexbox child since 6.2.0

[RobinVanCauter]

Steps to reproduce

Link to live example: https://codesandbox.io/s/mui-x-issue-template-forked-463wrg?file=/src/App.tsx

Steps:

1. Make sure viewport is small enough for the rows to overflow
2. Try scrolling the table, it will scroll the entire page instead because DataGridPro is not overflowing

Current behavior

The DataGrid is not inheriting the height from it's parent, causing it to grow to whatever size is needed to fit all of the rows provided to the component and causing the entire page to scroll instead.

Expected behavior

The DataGrid should inherit the parent's height and show a scrollbar, like it used to in version < 6.2.0.

Context

We're trying to setup a layout using CSS grids, where the DataGrid takes up "whatever space is left".

After trying out a couple of versions we noticed the following:

• it works as expected with any version BEFORE 6.2.0
• all newer versions, including 6.2.0, experience the issue

Your environment

Browser: Chrome

npx @mui/envinfo

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

Search keywords: DataGrid height flexbox css grid

[yaredtsy]

hey @T-Grave

You can achieve this behavior by adding this.

[`& .MuiDataGrid-virtualScroller`]: {
   flex: "1 1 0px",
  overflow: "auto"
}

demo: https://codesandbox.io/s/mui-x-issue-template-forked-m5hlqs

[DanailH]

Thank you @yaredtsy the workaround seems to be working as expected. Either way, we need to see what caused the degradation in functionality.

[yaredtsy]

hey @DanailH

This issue was caused by #8091. When GridAutoSizer was removed, the component responsible for handling resize based on flex was also removed with it. we can fix it like this.

--- a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
+++ b/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
@@ -25,6 +25,8 @@ const VirtualScrollerRoot = styled('div', {
 })<{ ownerState: OwnerState }>({
   overflow: 'auto',
   height: '100%',
+  flex: '1 1 0',
   // See https://github.com/mui/mui-x/issues/4360
   position: 'relative',
   '@media print': {

demo : https://codesandbox.io/s/mui-x-issue-template-forked-rn9zfz?file=/src/App.tsx

[cherniavskii]

Hi @T-Grave
I'm not 100% sure the DataGrid should inherit the parent's height as you expected.
I forked your sandbox and replaced the data grid with 2 divs instead to see how would regular HTML elements behave in this situation: https://codesandbox.io/s/mui-x-issue-template-forked-kxxvw3?file=/src/App.tsx
The behavior seems to be identical to the current behavior of the data grid.

I prefer to keep this behavior unless there's a strong argument to do otherwise.
What do you think?