[DataGrid] Fix layout when rendered inside a parent with display: grid

[cherniavskii]

Fixes #8547

Before: https://codesandbox.io/s/datagrid-6-0-0-in-grid-forked-nq8juy?file=/demo.tsx
After: https://codesandbox.io/s/datagrid-6-0-0-in-grid-forked-xs1sh5?file=/demo.tsx

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-8577--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	638.2	1,182.9	638.2	861.44	203.751
Sort 100k rows	ms	673.5	1,398.8	1,398.8	1,049.26	233.662
Select 100k rows	ms	222.7	375.2	327.5	302.76	54.734
Deselect 100k rows	ms	144.3	353.2	189.2	240.36	90.861

Generated by 🚫 dangerJS against d7696ee

[MBilalShafi]

The solution works for displays grid and flex but for table it still causes the same issue. I played around and display: grid seems to solve all the cases, do you see any caveats in changing root element's display property from flex to grid 🤔

Suggested change

	display: 'flex',
	overflow: 'hidden',
	display: 'grid',

[cherniavskii]

Unfortunately display: grid causes regressions like this one https://codesandbox.io/s/sad-spence-dv82dy and more (at least 12 unit tests fail).

Thanks for pointing out the issue with display: table, I'll look into it!

[cherniavskii]

@MBilalShafi
I think the behavior with display: table is expected.
I created this demo with a simple GridMock component and I believe the data grid should behave in the same way:
https://codesandbox.io/s/datagrid-6-0-0-in-grid-forked-fb4yjg?file=/demo.tsx

[MBilalShafi]

Alright, so that's how display: table natively works. Thanks for providing the demo.