[Grid] Having a DataGrid within a Grid within a flex div does not allow for a grid layout - forces it to follow the flex direction unless otherwise specified

[careignition-cps]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I am attempting to put my MUI datagrids in an MUI grid. However, my grid items do not seem to be going into grid format at all (ie all the DataTables are in one area, none of them are siding next to each other even though they take up less than half the space each on the page).

Expected behavior 🤔

Items in the grid should flow to fill the grid in row and column format, not stick to either row or column

Steps to reproduce 🕹

Here is my sandbox: https://codesandbox.io/s/silly-morning-gs58yh?file=/src/App.js

Context 🔦

The grid should not be affected by the css or styling of the external components of which it is a child.

Your environment 🌎

See the code pen

[danilo-leal]

Hey @careignition-cps, thanks for opening up the issue. Please, check this demo out and let me know if it has solved your problem. I guess you were only missing the container prop on the parent Grid wrapper.

[rejetto]

to be closed?

[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.

Note

We value your feedback @careignition-cps! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!