[DataGridPro] Incorrectly inheriting height from CSSGrid / Flexbox child since 6.2.0 about mui-x HOT 4 OPEN

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?

from mui-x.

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

from mui-x.

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

from mui-x.

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

from mui-x.