[data grid] Don't display last column separator in the community plan

[rmzNadir]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When using the flex property to define a column's width the last separator gets pushed all the way to the right.

Expected behavior 🤔

Last separator shouldn't be shown when using flex to define a column's width

Steps to reproduce 🕹

Steps:

1. Add the flex property to any of the columns defined.
2. You should now be able to see the separator all the way to the right, just like in the demo below.

CodeSandbox

Context 🔦

Trying to achieve column responsiveness using flex, right now it implies having to override the styles of the last separator to hide it.

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: macOS 11.5.2 Binaries: Node: 16.13.1 - ~/.asdf/installs/nodejs/16.13.1/bin/node Yarn: 1.22.18 - /usr/local/bin/yarn npm: 8.1.2 - ~/.asdf/installs/nodejs/16.13.1/bin/npm Browsers: Chrome: 100.0.4896.75 Edge: Not Found Firefox: 97.0.1 Safari: 14.1.2 npmPackages: @mui/x-data-grid: 4.0.2 => 4.0.2 @types/react: ^16.9.36 => 16.14.17 react: ^16.13.1 => 16.14.0 react-dom: ^16.13.1 => 16.14.0 styled-components: ^4.3.0 => 4.4.1 typescript: ^4.1.2 => 4.4.4 ```

Order ID 💳 (optional)

No response

[alexfauquette]

To give some context, the last element is useful with the Pro Plan, because it allows controlling the width of the last column as you can see in the following example.

https://codesandbox.io/s/columnfluidwidthgrid-material-demo-forked-3bxw1c?file=/demo.js:322-473

For now, if you want to hide this element, you can use the following CSS. The demo above contains the code,you just have to uncomment it

sx={{
  "& .MuiDataGrid-columnHeader:last-child .MuiDataGrid-columnSeparator": {
    display: "none"
  }
}}

[zhuhang-jasper]

Or in styleOverrides

    MuiDataGrid: {
      styleOverrides: {
        columnHeader: {
          "&:last-of-type": {
            "& .MuiDataGrid-columnSeparator": {
              display: "none"
            }
          }
        }
      }
    }