Quirky layout with TextField and DataGrid inside Grid inside Dialog

[rejetto]

Steps to reproduce

Link to live example: (required)
https://codesandbox.io/p/sandbox/quirky-layout-lm4ktv?file=%2Fsrc%2FApp.tsx%3A15%2C1-16%2C1

Steps:

1. be sure to run in a wide space, with some width to spare, as if the viewport is narrow the effect will not be evident.
2. click "show/hide textfield"

since the textfield is initially hidden, this click will unhide it, so if you did correctly now you are seeing both textfield and datagrid being displayed

Current behavior

the grid automatically expands iteratively (not my code, lib's) until it reaches the limit of the dialog.

This doesn't happen if only the textfield or only the datagrid are displayed.
The behavior is triggered the moment that both are visible.

Expected behavior

Width of the dialog should be max(width_of_textfield, width_of_datagrid)

Context

i have dynamic forms inside dialogs.
i don't want to workaround capping the dialog's width, because the content is dynamically decided and i may have other components that need more space, so the dialog will widen legitimately.

Your environment

can't run npx as it's codesandbox, but this is on my machine

npx @mui/envinfo

``` System: OS: macOS 14.6.1 Binaries: Node: 18.17.1 - /usr/local/bin/node npm: 9.6.7 - /usr/local/bin/npm pnpm: 8.14.3 - /opt/homebrew/bin/pnpm Browsers: Chrome: Not Found Edge: 128.0.2739.67 Safari: 17.6 npmPackages: @emotion/react: 11.11.3 @emotion/styled: 11.11.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.19 @mui/icons-material: 5.15.19 @mui/lab: 5.0.0-alpha.170 @mui/material: 5.15.19 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.16 @mui/utils: 5.16.6 @mui/x-date-pickers: 6.20.1 @mui/x-tree-view: 6.17.0 @types/react: 18.2.48 react: 18.2.0 react-dom: 18.2.0 typescript: 4.9.5

</details>

**Search keywords**: dialog grid datagrid

[siriwatknp]

I think it's due to the DataGrid. For workaround, you can use CSS :has to set the width if DataGrid is present:

<DialogContent sx={{ '&:has(.MuiDataGrid-root)': { width: 1536, boxSizing: 'border-box' }}}>

[rejetto]

thanks but your workaround uses a fixed width, and I explained why I don't want it.
I may have a datagrid with 1 column with short strings, or 10 columns with larger content. It's totally dynamic.
The base behavior is adapting well, doing what i want, it just stops working in that situation.