[DataGrid] display a horizontal scroll bar when resizing with column set to flex

[H01001000]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When changing the width of the device, the datagrid shows a horizontal scroll bar then the scroll bar disappears

Expected behavior 🤔

With column using flex 1 as width, it shouldn't be overflow the y axis, changing width should not show a scroll bar, as without a grid it works fine

Steps to reproduce 🕹

Steps:

1. Create a Grid container
2. Create a Grid item in Grid container
3. Create a DataGrid in Grid item
4. set colunms to flex
5. resize the window (I am just opening chrome dev tools on right and closing it)

https://codesandbox.io/s/datagrid-v5-quick-start-forked-623qi8

Context 🔦

I am creating a dashboard using Grid and DataGrid, I want all item in the Grid row to follow the height of the DataGrid (with a fixed row count), but when resizing due to the scrollbar appearing and disappearing, it increases the max height of the grid, causing another item stuck at the height of DataGrid with scrollbar (using align items: stretch and height 100% on other item).

Look at the bottom

Before resizing:

After resizing:

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: Windows 10 10.0.19044 Binaries: Node: 16.13.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 99.0.4844.82 Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.46) npmPackages: @emotion/react: ^11.8.1 => 11.8.2 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.73 @mui/icons-material: ^5.4.4 => 5.5.1 @mui/material: ^5.4.4 => 5.5.2 @mui/private-theming: 5.4.4 @mui/styled-engine: 5.5.2 @mui/system: 5.5.2 @mui/types: 7.1.3 @mui/utils: 5.4.4 @mui/x-data-grid: ^5.6.1 => 5.6.1 @types/react: ^17.0.39 => 17.0.41 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ^4.6.2 => 4.6.2 ```

`tsconfig`

``` { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "jsxImportSource": "@emotion/react", "incremental": true }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } ```

Browser: Chrome Version 99.0.4844.82 (Official Build) (64-bit)

Order ID 💳 (optional)

No response

[m4theushw]

We recalculate the width of the columns when the grid is resized. To avoid re-rendering the grid in each resize event we debounce them and only update the columns after 60ms, which explains why you see the scrollbar for a brief moment. Debouncing improves performance but it might cause this kind of unwanted behavior. The fix would cause more harm.

Since you have all columns set to flex, it means that a scrollbar should never be visible in normal conditions. To avoid seeing the scrollbar when resizing, you could add overflow: hidden to the virtualization container. Does it work for you?

<DataGrid
  sx={{
    "& .MuiDataGrid-virtualScroller": {
      overflow: "hidden"
    }
  }}
/>

[H01001000]

Yes, the scroll bar stops appearing. Thanks

[DrewLandgraveCbsi]

Can this be done in the theme overrides as well?

[PayalVerma21]

Hi Team,

I need one help here.

I am using MUI DataGridPro and I have always more than 25 columns. The requirement is to always show horizontal scrollbar without going down to the table.

is there anyway? Thank You!