1989495 - "grid-template-rows: 1fr auto" causes incorrect width calculation for first row when first child has some aspect-ratio

Status: NEW

(Core :: Layout: Grid, defect, P3)

Description

[alejandro9r]

Attachment: css-grid-bug-firefox-nightly-144.jpg

Steps to reproduce:

Firefox incorrectly calculates the width of the first grid row when using grid-template-rows: 1fr auto in combination with a child element that has aspect-ratio.

The issue specifically occurs when the second row uses auto sizing. When changing grid-template-rows: 1fr auto to grid-template-rows: 1fr 2rem (or any explicit size), the width calculation becomes correct and matches other browsers. Happens with standard images or elements, as long as there is a aspect-ratio to be followed.

Test case:
https://codepen.io/Arecsu/pen/myVdWLp

Workaround:
Replace auto with an explicit size in grid-template-rows (e.g., 1fr 2rem). This could defeat some responsive layouts though.

Affected versions:
Firefox 143
Firefox Nightly 144

Other browsers:
Works correctly in Chrome and Safari.

Actual results:

The first row gains extra/incorrect width, causing the grid items to be wider than they should be. The area becomes oversized compared to other browsers.

Expected results:

The first row (containing the image) should maintain proper aspect ratio constraints and not expand beyond necessary width, like on Chrome/Safari.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Grid' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Attachment: Test-case from comment 0

Comment 3

[Emilio Cobos Álvarez [:emilio]]

So behavior here used to be much worse until bug 1957244. Ting-Yu, maybe some minor bit missing here?