[DataGrid] Rows content disappear on display size change

[ru4ert]

Youtube Video

DataGrid content disappears when "Material Grid" forces a Grid change.

Current Behavior 😯

Expected Behavior 🤔

Maybe I want to see it, too? 🤔

Steps to Reproduce 🕹

const rows:GridRowModel[] = Object.keys(values.Members).map(key => {
    return {
        name: values.Members[key].name,
        role: values.Members[key].role,
        type: values.Members[key].type,
        dedicated: values.Members[key].dedicated,
        fulltime: values.Members[key].fulltime,
        hasShares: values.Members[key].hasShares,
        linkedInLink: values.Members[key].linkedInLink,
        stockOptionProgram: values.Members[key].stockOptionProgram,
        id: values.Members[key]._id,
    }
}) 
return (
          <DataGrid
          rows={rows}
          columns={columns}
          components={{
              Toolbar: GridToolbar,
          }}
          onEditCellChange={onEdit}
          onSelectionModelChange={onSelect}
      />
)

Your Environment 🌎

tsconfig

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

`npx @material-ui/envinfo`

System:
OS: Windows 10 10.0.19043
Binaries:
Node: 14.17.0 - C:\Program Files (x86)\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.13 - C:\Program Files (x86)\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.48)
npmPackages:
@emotion/react: ^11.4.0 => 11.4.0
@emotion/styled: ^11.3.0 => 11.3.0
@material-ui/core: ^4.11.2 => 4.11.4
@material-ui/data-grid: ^4.0.0-alpha.31 => 4.0.0-alpha.31
@material-ui/icons: ^4.11.2 => 4.11.2
@material-ui/lab: ^4.0.0-alpha.58 => 4.0.0-alpha.58
@material-ui/styles: 4.11.4
@material-ui/system: 4.11.3
@material-ui/types: 5.1.0
@material-ui/utils: 4.11.2
@types/react: ^17.0.8 => 17.0.8
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: ^4.3.2 => 4.3.2

[dtassone]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[oliviertassinari]

@dtassone The link to codesandbox is not working. Please save this as a "saved reply" .

Please provide a **minimal** reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. [This **codesandbox.io** template](https://material-ui.com/r/issue-template) _may_ be a good starting point. Thank you!

I have updated https://www.notion.so/GitHub-issues-PRs-c1d7072e0c2545b0beb43b115f6030f6 to help.

Also, the video provided is self-explanatory. I'm moving forward with a direct answer.

[oliviertassinari]

@Rupert-com The parent of the data grid needs to have an intrinsic height, see https://material-ui.com/components/data-grid/layout/.

[ru4ert]

thanks!