[material-ui][Grid] Wrapped Unstable_Grid2 containers increasing height for each word in a grid item

[valefar-on-discord]

Steps to reproduce

Link to live example: (codesandbox)

The code sample shows three instances of the exact same chunk of logic:

<Grid container direction="column">
  <Grid container>
    <Grid xs={2} xsOffset={10}>
      Text
    </Grid>
  </Grid>
</Grid>

The only differences between them is the amount of words in the Grid item component, yet the height increasing based on the number of words, not the length of the text.

Current behavior

The height of the Grid item is based on the amount of words regardless of size

Expected behavior

The total size of the text would be relevant, but not the word count

Context

I am in the progress of migrating from a Material v4 to v5. I attempted using the standard Grid which completely failed and based on #29266 I decided to attempt Grid2 but am running into other issues as well.

This is an extremely simplified example of an issue I am running into.

Your environment

No response

Search keywords: Materialv5 Grid2 Unstable_Grid2 nested containers

[siriwatknp]

I am not sure what's the full layout you want but I suggest to not use nested Grids.

[valefar-on-discord]

I am not sure what's the full layout you want but I suggest to not use nested Grids.

Given you have a section in your documentation dedicated to nested grid containers I feel a "don't do that" is not an appropriate response.

I would like to add this is a regression.

As mentioned in the ticket I am working on migrated from v4 to v5. This isn't a new project I am developing and completely rewriting the layout of the application would not be ideal.

[siriwatknp]

Okay, I take a deeper look. You need to explicitly specify the column size with xs, … to the BlueGrid because it is a child of a Grid container.

<BlueGrid container xs={12}>