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

[noobDev31]

@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

Hi @sai6855, I agree with you here, I couldn't find anything written about it on the migration guide and it caused us a ton of adoption issues, can we write a small note on the docs about it please @siriwatknp

[Jul13nT]

Same here, I'm thinking of adding back width: 100% to the theme for all Grid2 as it causes too much problem in the +2000 Grid of my project.

[PenghaiZhang]

We have this problem as well. I think at the very least this change should be mentioned in the migration guide.

[AntonioLuisME]

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.

Isn't this a re-definition of how the Grid component should be used?!

In our project we use Grid extensively for all kinds of layouts. Migrating to Grid2 breaks 220 files which use Grid which will need some sort of manual change and testing. This is not trivial.

Can the migration guide be more thorough, to explain and provide solutions for all the breaking changes please?

[siriwatknp]

@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

Sure, feel free to update the docs and tag me.