[DataGrid] Flickering when creating with flex columns

[randalpinto]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When columns are set with "flex: 1" the table first renders with 100px columns and then reflow to fill the entire screen. This causes an ugly flicker effect.

Expected behavior 🤔

Table would render with the correct flex column widths.

Steps to reproduce 🕹

Steps:

I've created a code sandbox to illustrate: https://codesandbox.io/s/basictabs-material-demo-forked-ojm24?file=/demo.js:2058-2173

Just switch between tabs 1 and 2.

Context 🔦

Trying to present a better user experience.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 11.6
  Binaries:
    Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.0
  npmPackages:
    @emotion/react: ^11.7.0 => 11.7.0 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.57 
    @mui/icons-material: ^5.2.0 => 5.2.0 
    @mui/material: ^5.2.1 => 5.2.1 
    @mui/private-theming:  5.2.1 
    @mui/styled-engine:  5.2.0 
    @mui/styles: ^5.2.1 => 5.2.1 
    @mui/system:  5.2.1 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.0 
    @mui/x-data-grid: ^5.0.1 => 5.0.1 
    @types/react: ^17.0.37 => 17.0.37 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.5.2 => 4.5.2  

[flaviendelangle]

Duplicates #3212, it will be fixed in the next release