[DataGrid] Wrong scrollbar with last row on specific screen sizes

[jessq]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The last row gets cut off when rendering, on very specific screen sizes. It also sometimes has way too much space under it.

Expected Behavior 🤔

The last row should end exactly where the footer starts.

Steps to Reproduce 🕹

https://codesandbox.io/s/jovial-glitter-mbkr7

last.row.gets.cut.off.or.has.too.much.space.mov

Resize the window until the last row gets cut off.

Context 🔦

Your Environment 🌎

v4.0.0-alpha.23

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

  Can replicate on Firefox, Chrome, and Safari

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Edge: Not Found
    Firefox: 87.0
    Safari: 14.0.2
  npmPackages:
    @emotion/styled:  10.0.27
    @material-ui/core: ^4.11.2 => 4.11.2
    @material-ui/icons: ^4.9.1 => 4.9.1
    @material-ui/lab: ^4.0.0-alpha.46 => 4.0.0-alpha.56
    @material-ui/pickers:  3.2.10
    @material-ui/styles:  4.11.2
    @material-ui/system:  4.11.2
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.10.2
    @material-ui/x-grid: ^4.0.0-alpha.22 => 4.0.0-alpha.23
    @material-ui/x-license:  4.0.0-alpha.21
    @types/react: ^16.9.23 => 16.9.38
    react: ^16.13.0 => 16.13.1
    react-dom: ^16.13.0 => 16.13.1
    typescript: ^4.1.3 => 4.1.3

Order id 💳

#22665

[oliviertassinari]

@jessq Thanks for the reproduction. I have updated to use DataGrid, as it's not specific to XGrid: https://codesandbox.io/s/heuristic-ritchie-m0sk0?file=/src/App.tsx.

A large chunk of the issue has been fixed in #1253. The last row is no longer cut-off. It was released in v4.0.0-alpha.24:

However, we didn't solve the root cause. The scrollbar is still not correctly aligned with the rendered rows. It still overflows (big gap)

[oliviertassinari]

Duplicate of #414