[data grid] Scrollbar flickering

[Anupheaus]

Steps to reproduce

Steps:

1. Open this link to live example.
2. You can see that it is constantly flickering on and off as soon as you go to the page.

Current behavior

Does this lovely scrollbar strobe-like effect:

MUI.DataGrid.Flickering.mov

Expected behavior

No scrollbar strobe-like effect.

Context

We have a number of DataGrids in our app that have this issue, but it took us a good while to replicate it to give you a live example. We have removed our changes as much as possible but we can explore no further to give exactly what the issue is.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 26.1
  Binaries:
    Node: 20.18.2 - /Users/anthony.hales/.nvm/versions/node/v20.18.2/bin/node
    npm: 10.8.2 - /Users/anthony.hales/.nvm/versions/node/v20.18.2/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 142.0.7444.176
    Edge: Not Found
    Firefox: 144.0
    Safari: 26.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.14.0 
    @emotion/styled: ^11.11.5 => 11.14.1 
    @mui/core-downloads-tracker:  5.18.0 
    @mui/icons-material: ^5.15.18 => 5.18.0 
    @mui/material: ^5.16.7 => 5.18.0 
    @mui/private-theming:  7.3.2 
    @mui/styled-engine:  7.3.2 
    @mui/system:  7.3.2 
    @mui/types:  7.2.24 
    @mui/utils:  5.17.1 
    @mui/x-data-grid:  7.29.9 
    @mui/x-data-grid-premium: ^7.27.2 => 7.29.9 
    @mui/x-data-grid-pro:  7.29.9 
    @mui/x-date-pickers:  7.29.4 
    @mui/x-date-pickers-pro: ^7.22.1 => 7.29.4 
    @mui/x-internals:  7.29.0 
    @mui/x-license: ^7.21.0 => 7.29.1 
    @types/react: ^19.1.0 => 19.1.16 
    react: 19.1.0 => 19.1.0 
    react-dom: 19.1.0 => 19.1.0 
    styled-components: ^6.1.19 => 6.1.19 
    typescript: ^5.8.3 => 5.9.2

Search keywords: scrollbar flickering

Order ID: 111600

[michelengelen]

Hey @Anupheaus and thanks for opening an issue for this.

I am looking into this.

A few questions though:

• Does this happen on a specific version?
• Did you notice this bug previously on older versions as well?

[Anupheaus]

Thank you @michelengelen

It's not version specific, as you can see from our envinfo, we are using older versions, but the sandbox example is using the latest version and it happens on both our version and the latest version.

[arminmeh]

@Anupheaus
Since your container and rows do not have a defined height, the scrollbar position calculation gets stuck in a loop
You can add the autoHeight prop to the grid or use flex parent container to resolve the issue.

I see that in Stackblitz, autoHeight is still marked as deprecated, but it has been undeprecated, and the links above contain a list of cases in which you should use one or the other