Grid container in CardActions no longer take the whole width

[ACayet]

Steps to reproduce

Link to live example: (CodeSandbox)

Steps:

1. Create a CardActions
2. Create a Grid Container inside the CardActions
3. Create a Grid Item inside the Grid Container

Current behavior

The Grid container does not take the whole width of the CardActions.

Expected behavior

The Grid container should take the whole width of the CardActions.
In Grid v1 the Grid container had a width css property to 100% (with a calc to take into account margin).

Context

I am trying to migrate from Grid v1 to Grid v2. The code to migrate contains a lot of CardActions containing Grid containers with justifyContent: 'flex-end' that are as a consequence on the left side of the CardActions

Your environment

npx @mui/envinfo

  System:
    OS: Linux 5.15 Linux Mint 21.3 (Virginia)
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.69

Search keywords: Grid Container CardActions Grid2 Width

[ACayet]

After some complementary research the same behavior is happenning in AccordionSummary and Toolbar. It might be happening in other components too.

[sai6855]

Did some initial investigation, regression seems to stem from absense of width:100% from Grid2 root component. GridV1 has this property but missing in v2.

I've checked migration guide to GridV2 https://mui.com/material-ui/migration/migration-grid-v2/, there is no mention of removal of width:100% property. so i'm expecting this to be an regression instead of expected behaviour.

Added GridV1 demos to OP's sandbox to clearly see differences in behaviour in 2 versions

https://codesandbox.io/p/sandbox/grid-container-in-cardactions-toolbar-and-accordionsummary-no-longer-takes-the-whole-width-forked-2qxwvf?file=%2Fsrc%2FDemo.tsx%3A20%2C6

[ddolcimascolo]

@siriwatknp @zannager Can you give an update? This is currently blocking our migration and we would like to know if this is something we have to change on our side, or if you'll fix this in core.

Thanks,
David

[siriwatknp]

@ACayet @ddolcimascolo @sai6855 Grid2 is a rewrite of Grid1. I don't think it's a good practice to set width: 100% by default as that's the default behavior of block element.

In this issue, I'd recommend to use flex: 1 when Grid is in a flex container.

<CardActions>
  <Grid sx={{ flex: 1 }}>…
</CardActions>

Note: Be cautious, it seems like you are overuse the Grid component and make the layout too complex. The Grid layout is useful for organizing layout with media query for a page layout but what you are doing is putting the Grid inside a component which I don't recommend because the Card is a component, not a page. The width varies when it's placed in different containers.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ACayet How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[sai6855]

@siriwatknp do you think removal of width:100% should be mentioned in migration guide? Maybe it's already present but i couldn't spot it