[data grid] Layout shift caused by multiple flex columns in a container with non fixed width

[LukeCSYello]

The problem in depth

Reproduction link: https://stackblitz.com/edit/react-v9tinf?file=Demo.tsx,package.json,index.tsx
(the StackBlitz didn't seem to work in new tab for me, but in the inline editor illustrates the example. It was forked from one of the demos, and I used DataGridPro instead)

Preface:
I wasn't sure whether this belonged as a question or a bug, because it may be intended behaviour, or I may be misunderstanding something.

Explanation:
When using a data grid with more than one column that has a flex property instead of a width property, in a container with no fixed height, there is a layout shift of 15px momentarily. In the example reproduction, this issue only seems to occur when going from the final page that has less than the maximum number of rows, to a previous page, that has the maximum number of rows for that page. The issue also occurs when you have a column with a fixed width after a flex column.

The element that causes the layout shift is one with classes 'MuiDataGrid-scrollbarFiller MuiDataGrid-scrollbarFiller--header' that goes from width 0px -> 15px -> 0px. This seems to be related to the CSS variable: '--DataGrid-hasScrollY', which goes from 0 -> 1 -> 0 (at the same time as the width change, so my suspicion is that these are related in some way...)

My question is whether it is possible to avoid this layout shift without having to define a fixed height, or without being restricted to 1 or less flex width columns.

In my reproduction, you can see both scenarios I am talking about by commenting out so either lines 114/115 or 116/117 are being used to define the columns and rows.

Your environment

`npx @mui/envinfo`

System:
    OS: macOS 14.4.1
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.70
    Edge: 130.0.2849.56
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.10.6 => 11.13.3 
    @emotion/styled: ^11.10.6 => 11.13.0 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.16.7 
    @mui/icons-material: ^5.14.18 => 5.16.7 
    @mui/material: ^5.14.18 => 5.16.7 
    @mui/private-theming:  5.16.6 
    @mui/styled-engine:  5.16.6 
    @mui/system: ^5.14.18 => 5.16.7 
    @mui/types:  7.2.16 
    @mui/utils:  5.15.14 
    @mui/x-data-grid:  7.22.0 
    @mui/x-data-grid-pro: ^7.22.0 => 7.22.0 
    @mui/x-date-pickers: ^6.18.2 => 6.20.2 
    @mui/x-internals:  7.21.0 
    @mui/x-license:  7.21.0 
    @types/react: 18.2.38 => 18.2.38 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: 5.3.2 => 5.3.2 

Browser: Version 130.0.6723.70 (Official Build) (x86_64)
OS: MacOS Sonoma 14.4.1

Search keywords: layout shift, flex, layout, width, height
Order ID: MUI Store - Order 101041

[michelengelen]

Hey @LukeCSYello ... could you share a video/screenrecording of the issue you are seeing? I fail to reproduce it with the provided steps (no shift is seen)