[data grid] Column with flex=1 generates a new column

[DanielaDark]

The problem in depth

Link to Sandbox
Please see sandbox for specific implementation. In short: we use the DataGrid without column headers and only with 1 Column. The column:

• is a custom GroupingColumn
• the GroupingColumn has Property Flex=1
• has treeData activated

The container where DataGridPremium is embedded has no set height (for example a MUI Popover).

Expected behavior:
DataGrid is displayed correctly. When elements are expanded, container grows in height, when elements are collapsed - container shrinks. No extra Cells are displayed.

Actual behavior
An extra cell is added in each row thought flex=1 property is set.

Note: The extra cell disappears when container is given a height Property (for example in demo.tsx line 174)

Motivation: I wanted to use the Grid Component in a Popover, which has flexible height based on the contents.

Your environment

`npx @mui/envinfo`

  Browser: Firefox
    System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD  
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.70
    Edge: Chromium (131.0.2903.51)
  npmPackages:
    @emotion/react: ^11.10.6 => 11.11.4 
    @emotion/styled: ^11.10.6 => 11.11.5
    @mui/base:  5.0.0-alpha.124
    @mui/core-downloads-tracker:  5.15.18
    @mui/icons-material: 5.11.16 => 5.11.16
    @mui/lab: 5.0.0-alpha.125 => 5.0.0-alpha.125
    @mui/material: 5.11.16 => 5.11.16
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/styles: 5.11.16 => 5.11.16
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-data-grid:  6.9.2
    @mui/x-data-grid-premium: 6.9.2 => 6.9.2
    @mui/x-data-grid-pro:  6.9.2
    @mui/x-license-pro:  6.9.0
    @types/react: ^18.0.26 => 18.3.2
    react: ^18.2.0 => 18.3.1
    react-dom: ^18.2.0 => 18.3.1
    typescript: 4.4.3 => 4.4.3

Search keywords: DataGrid width
Order ID: 99555

[michelengelen]

Hey @DanielaDark ... your codesandbox is set to private. Could you change the permission on it so we can have a look at that as well? Thanks! 🙇🏼

[DanielaDark]

@michelengelen, sorry my bad. Now it should be public.

[michelengelen]

Hey @DanielaDark ... it's not showing that extra cell for me:

[DanielaDark]

Hey @michelengelen, I really don't know, why it is not displayed for you. I checked the Link in Edge, Chrome and Firefox. My colleges checked it. We all have the extra cell in display.

[michelengelen]

This is indeed interesting. I did test this on browserstack (Win 10 and Chrome 131) and there I can see the additional cell. I do not have a windows10 machine at hand to bugfix, but will see if we can somehow do this anyways.

Thanks for creating the issue! 🙇🏼

[michelengelen]

I just tried again with the latest grid version and there it works.
Would updating the grid version be an option for you?