refactor!: apply width: 100% and remove flex value in grid

[DiegoCardoso]

Description

• Remove flex: 1 1 auto from grid's :host styles (both base and Lumo), replacing it with width: 100%. The browser default flex: 0 1 auto now applies.
• Remove now-redundant flex-grow: 0 and width: 100% overrides from :host([all-rows-visible]) since the defaults already provide this behavior.

Fixes #11376

Why

flex: 1 1 auto on :host causes flex-grow: 1, making the grid expand to fill any space in a flex container. This overrides explicit heights set by developers.

Behavioral changes

Scenario	Before	After
Grid with explicit height in a sized flex-column container	Ignores height, grows to fill container	Respects explicit height
Grid (default 400px) in a sized flex-column container	Grows to fill container	Stays at 400px
Grid in non-flex / CSS grid / auto-height flex containers	No change	No change
all-rows-visible grid	No change	No change

Breaking change

Grids that previously relied on flex-grow: 1 to automatically fill vertical flex containers will no longer do so. Developers who want the old behavior can add flex-grow: 1 to the grid explicitly.

Testing

I asked Claude to generate a page with some testing scenarios placing a grid alone or with siblings in different containers. The only ones I found some difference are when a grid is added next to a sibling with defined width in a flex container (in the example, it uses a horizontal-layout as parent):

Before

After

The testing page can be checked here: grid-sizing.html

Type of change

• Refactor

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud