[data grid] Minimal overlay height with flex parent container (with dynamically height)

[serrg]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-scjzzs?file=Demo.tsx

Current behavior

With using flex parent container without any minimum height, the overlay does not appear:

The issue occurs both in v6 and v7 versions

Expected behavior

The overlay should always have a minimum height set in flex parent container (regardless the height):

A possible workaround is to set a min-height: 104px on .MuiDataGrid-overlayWrapper. However, this change will also impact other overlays, such as the loading indicator.

Context

The data grid is mounted inside a flex parent container without a maximum height. It should adapt its size dynamically, taking up the entire viewport when needed and hugging the grid's contents otherwise:

Recording:
https://github.com/user-attachments/assets/71476685-48a1-4d65-ad95-8b2eb8744f9b

Your environment

npx @mui/envinfo

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

Search keywords: data grid, auto height, parent container
Order ID: 82039

[michelengelen]

You can use the --DataGrid-overlayHeight variable for this.

[serrg]

You can use the --DataGrid-overlayHeight variable for this.

@michelengelen Thanks for you answer but looks like setting '--DataGrid-overlayHeight': '300px' doesn't work in my case: https://stackblitz.com/edit/react-scjzzs?file=Demo.tsx

[michelengelen]

That's weird, because the exact same thing works on my local machine. Might be a limitation of stackblitz 🤷🏼

Also you should follow the official approach to make the data grid adjust its height dynamically: flex parent container

[serrg]

That's weird, because the exact same thing works on my local machine. Might be a limitation of stackblitz 🤷🏼

I am just not sure how it can be affected by stackblitz 🤔 You can just open https://react-scjzzs.stackblitz.io/ directly and see that overlay has no default height

Also you should follow the official approach to make the data grid adjust its height dynamically: flex parent container

The above example strictly follows to the official approach, it is using the flex parent container

[serrg]

Applying --DataGrid-overlayHeight is not working because the parent container (MuiDataGrid-overlayWrapper in that case) has height set to 0

[michelengelen]

It has to do something with stackblitz, as the exact same code works locally and on codesandbox: DEMO

Thats not unusual though. We do some magic behind the scenes grabbing the variable from CSS and applying it in a function directly to the wrapper.

[serrg]

Thank you for setting up the sandbox, but it seems the code isn’t an exact match. You’re using the latest version of @mui/x-data-grid (7.22.3), whereas I’m working with version 7.22.2. Interestingly, it does work on 7.22.3 but not on 7.22.2 😅

[michelengelen]

ah, my bad ... we fixed that recently and I did not check the version: #15535 🤔