[data grid] DataGrid does not autoresize width correctly when nested with a Drawer style component

[rdougan]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/nice-napier-76g87r?from-embed=&workspaceId=d9cbb423-51f0-4df3-be6d-b113d5e3bb6c
2. Resize window

Current behavior

The drawer is not visible unless you make the window large enough for DataGrid full width + drawer. If you resize the window smaller, the drawer hides. If you

Expected behavior

Drawer should take up full width of the container.

Context

I first noticed this as my app has a Drawer component with DataGrid's sometimes appearing on screen with it. If I resize, I would like to show the drawer on the left, while showing the full width DataGrid.

Your environment

OSX Chrome & Safari

Search keywords: datagrid width autoresize
Order ID: 86320

[michelengelen]

This is a CSS flexbox related problem, not a problem with the data grid. Top force the drawer to a specific width you can use flex: 1, minWidth: 240.

Is this what you are looking for?

[rdougan]

@michelengelen I've updated the codesandbox to remove width and add minWidth and flex and the data grid does not follow the size of the container. If you remove the data grid, the container (red) resizes correctly.

https://codesandbox.io/p/sandbox/nice-napier-76g87r?from-embed=&workspaceId=d9cbb423-51f0-4df3-be6d-b113d5e3bb6c

[rdougan]

I've gotten around it by wrapping the grid in a position: absolute container:

<Box sx={{position: 'relative'}}>
    <Box sx={{inset: 0, position: 'absolute'}}>
        {...grid}
    </Box>
</Box>

I do believe this is still a layout bug with DataGrid.

[rdougan]

And another follow up...

The issue can be resolved by adding a minWidth: 0 to the parent container of the data grid.

[michelengelen]

I tend to disagree. It is not a layout bug of the data grid.

As mentioned before you are encountering a limitation of the flex-box property (and the css grid as well).

A flex item cannot be smaller than the size of its content along the main axis.

To be a bit clearer about this: The flex-child will always try to shrink to fit the size of the content, since min-width: auto is set on it. That's why setting min-width: 0 solves this problem.

Very good answer about this on StackOverflow

[michelengelen]

Its great though that you could fix your problem.
I will close this now! Thanks again for taking the time and opening an issue here!

[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

@rdougan How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.