[data grid] Does not shrink on screen resize inside flexbox

[tombryden]

Steps to reproduce

Steps:

1. Open codesandbox https://codesandbox.io/p/devbox/black-bush-66xcfy?workspaceId=836800c1-9711-491c-a89b-3ac24cbd8cd8
2. Resize the screen and notice that when you expand the size, the data grid expands, however when you try to reduce the size the data grid does not reduce in size.

https://github.com/user-attachments/assets/b3e7d3ec-df57-4a1e-9ce1-6900ceb469ec

Current behavior

The data grid doesn't shrink consistently between the three scenarios above.

The short text & long text code is identical, apart from the length of the <p> text. I followed instructions from another issue which had the same problem seen here https://github.com/mui/mui-x/issues/8463#issuecomment-1496315707 - hence the attempt with using the instructions from this reply, although I would expect the shrinking behaviour to work with the simple scenario.

Expected behavior

Datagrid should shrink consistently between all scenarios

Context

Display a DataGrid with responsiveness when resizing the screen

Your environment

npx @mui/envinfo

``` Chrome System: OS: Windows 10 10.0.19045 Binaries: Node: 18.17.1 - C:\Program Files\nodejs\node.EXE Yarn: 4.0.1 - C:\Program Files\nodejs\yarn.CMD npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 119.0.6045.200 Edge: Spartan (44.19041.3636.0), Chromium (119.0.2151.93) npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.13 @mui/core-downloads-tracker: 5.14.12 @mui/icons-material: ^5.14.9 => 5.14.9 @mui/lab: ^5.0.0-alpha.142 => 5.0.0-alpha.142 @mui/material: ^5.14.12 => 5.14.12 @mui/private-theming: 5.14.12 @mui/styled-engine: 5.14.12 @mui/system: 5.14.12 @mui/types: 7.2.5 @mui/utils: 5.14.19 @mui/x-data-grid: ^6.18.2 => 6.18.2 @types/react: 18.2.21 => 18.2.21 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: ^5.2.2 => 5.2.2 ```

Search keywords: datagrid shrink resize

[michelengelen]

Hey @tombryden ... I can see that this is a bit inconsistent. We'll look into that.

In the meantime, did you try to use the components from our core package? Here is a demo of how this could help you in achieving what you are aiming for: Resize example

I will have a look why that behaves differently.

[michelengelen]

Hey @tombryden ... Sry for the late reply. I have been looking into this issue this morning and I am not sure why the fix you found on the comment is not working for you.

It is working just fine for me: resizing example

I will close this issue now, but feel free to reopen if you need something else regarding this.

Thanks! 🙇🏼

[tombryden]

@michelengelen Thanks for looking into this, adding overflow: hidden seems to do the trick, looks like I put this in the wrong place. https://codesandbox.io/p/devbox/silly-lovelace-vvkthd?file=%2Fsrc%2FApp.tsx%3A17%2C13&workspaceId=836800c1-9711-491c-a89b-3ac24cbd8cd8

[AlexanderKormilin]

Why is that closed?

the issue is totally still here, any plans on a valid solution, not a "overflow: hidden" shit?

[AlexanderKormilin]

@michelengelen

[oliviertassinari]

As far as I understand this issue, it's a userland misconfiguration of the use of CSS flexbox. This seems to be enough to fix the issue:

       <div
-        style={{ flexGrow: 1, flexShrink: 0, flexBasis: 0 }}
+        style={{ flexGrow: 1, flexShrink: 0, flexBasis: 0, minWidth: 0 }}
         id="right"
       >

https://codesandbox.io/p/devbox/cool-cerf-2ksl98?file=%2Fsrc%2FApp.tsx%3A15%2C8&workspaceId=836800c1-9711-491c-a89b-3ac24cbd8cd8. I wouldn't use overflow: hidden. It creates a stacking context, it prevents elements to overflow.

https://dfmcphee.com/flex-items-and-min-width-0/ explains why this happens. In more details: https://www.youtube.com/watch?v=cH8VbLM1958.

It also reminds me of #8547.

[mjlst]

Though this solution is a reasonable one, it looks and feels choppy. Are there any solution that solves this issue more smoothly/gracefully? It's been causing quite some issues using the latest version of MUI...

[vivere-dally]

It is easy to reproduce. For example the snippet above does not work. After you shrink and expand the first box, the Grid goes off the screen.

I guess redrawing it fixes the issue (in my case, I am presenting a grid with not much data and I don't really care about its state - but for others this might be a deal breaker).

The other approaches that I found in github issue comments and on SO are just hacks that may or may not work.

This is a really simple use case and it feels like you have to hack it to work it your way.

export default function Foo() {
    const [isOpen, setIsOpen] = useState(true)

    return (
        <Box sx={{ width: '100%', height: '100%', display: 'flex' }}>
                <Fab
                    color='primary'
                    aria-label='add'
                    onClick={() => {
                        setIsOpen(!isOpen)
                    }}
                >
                    do
                </Fab>
                <Box sx={{ width: '100%', height: '100%', display: 'flex' }}>
                    <Box sx={{ backgroundColor: 'red', width: isOpen ? 400 : 0 }}></Box>
                    <Box
                        sx={{
                            backgroundColor: 'blue',
                            flexGrow: 1,
                        }}
                    >
                        <DataGridPremium
                            // key={isOpen ? 1 : 2} -- rerender?
                            columns={[{ field: 'foo' }]}
                            rows={[{ id: 1, foo: '123' }]}
                        />
                    </Box>
                </Box>
           </Box>
    )

[oliviertassinari]

@vivere-dally Do you have reproduction where https://github.com/mui/mui-x/issues/11295#issuecomment-2232925715 doesn't work?

[vivere-dally]

@oliviertassinari yes, for the snippet above it does not work. But also important, the component is part of a large application. It is not just in a sandbox where it is the primary component. Other comments suggested that I should change all components from the grid float example to the root of the app. I am not wiling to make any other changes but in this component. If I comment out the Grid in the example above, the flex behaves as expected.

[oliviertassinari]

@vivere-dally I would still be curious to see a reproduction where the constraint is that you can't touch DOM nodes up in the tree, It might be a matter of adding a width prop in the leaf.