[DataGrid] does not function correctly with flex and flex-grow.

raminious commented 1 year ago

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/mui-grid-pro-hqfpjs

Suppose I have two rows available to me. The first one is used as the header, and the second one is responsible for rendering the grid. The height of the grid container can change on the fly. At the moment, the grid scrollbar is not working if I do not add the 'height: 0' style.

import "./styles.css";

import { DataGridPro } from "@mui/x-data-grid-pro";
import { useDemoData } from "@mui/x-data-grid-generator";

export default function App() {
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 100,
    editable: true
  });

  return (
    <div
      style={{
        height: "100vh",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden"
      }}
    >
      <div
        style={{
          height: "110px",
          background: "#ccc"
        }}
      >
        My Header
      </div>

      <div
        style={{
          flexGrow: 1,
          height: "0px"
        }}
      >
        <DataGridPro {...data}  />
      </div>
    </div>
  );
}

Current behavior 😯

At the moment, in order for the grid to function properly, I need to set a 'height: 0px'. If you don't do that, the scrolling won't work properly.

Expected behavior 🤔

It should work with flexGrow: 1

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` System: OS: macOS 13.3.1 Binaries: Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node Yarn: Not Found npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm Browsers: Chrome: 114.0.5735.133 Edge: Not Found Firefox: 113.0.1 Safari: 16.4 npmPackages: @emotion/react: ^11.11.0 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.4 @mui/core-downloads-tracker: 5.13.4 @mui/icons-material: ^5.11.16 => 5.11.16 @mui/material: ^5.13.2 => 5.13.5 @mui/private-theming: 5.13.1 @mui/styled-engine: 5.13.2 @mui/system: 5.13.5 @mui/types: 7.2.4 @mui/utils: 5.13.1 @mui/x-data-grid: 6.8.0 @mui/x-data-grid-generator: ^6.0.1 => 6.8.0 @mui/x-data-grid-premium: 6.8.0 @mui/x-data-grid-pro: ^6.8.0 => 6.8.0 @mui/x-license-pro: 6.6.0 @types/react: ^17.0.3 => 17.0.35 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: ^4.1.3 => 4.4.1 typescript: ^4.6.3 => 4.6.3 ```

Order ID or Support key 💳 (optional)

62913

romgrk commented 1 year ago

Yes we have been requiring the component to have explicit dimensions: https://mui.com/x/react-data-grid/layout/

@m4theushw Do you know if there is a technical reason for which it doesn't work with just flexGrow?

m4theushw commented 1 year ago

@raminious You need to add overflow: auto to the same element that contains flexGrow: 1. This will create a new Block Formatting Context. Here's the updated CodeSandbox: https://codesandbox.io/s/mui-grid-pro-forked-kzxzff?file=/src/App.tsx

<div
  style={{
    flexGrow: 1,
    overflow: "auto"
  }}
>
  <DataGridPro {...data} />
</div>

@romgrk Well, it works with the overflow: auto trick. This problem with flex-grow: 1 is not new, but there's no much to do because it's how flex layout works. See the proof in https://github.com/mui/mui-x/issues/8758#issuecomment-1531939637

mui / mui-x