1765660 - flex containers and grid containers with `min-height:auto` and aspect-ratio don't expand to fit their content

Status: RESOLVED DUPLICATE of bug 1760658

(Core :: Layout: Flexbox, defect)

Description

[corey]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:99.0) Gecko/20100101 Firefox/99.0

Steps to reproduce:

Apply "aspect-ratio" property to a "display: grid" or "display: flex" element with enough content that would overflow the aspect ratio.

Test case: https://codepen.io/coreyworrell/pen/MWrxjQj

Actual results:

The text overflows the element.

Expected results:

The element should have expanded past the aspect ratio to accommodate the text. Chrome handles it correctly.

Comment 1

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

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

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (with `min-height:0` added), where Chrome and Firefox agree

For comparison, here's a copy of testcase 1 but with min-height:0 added to the various containers being tested.

Chrome and Firefox agree on this one -- all of the containers (the black outlines) shrink to 100px (as dictated by the aspect-ratio), except for the table (which isn't too surprising since tables have special content-fitting behavior).

Comment 4

[Daniel Holbert [:dholbert]]

So this is specifically about grid and flex containers, with aspect-ratio and (default) min-height:auto on the container itself (not on the items), and with content inside that is larger than what the aspect ratio would dictate.

Chrome expands the container to fit the aspect-ratio but we do not (though we do for block/table containers).

Comment 5

[Boris Chiou [:boris]]

This may be related to Bug 1760658. I will check this once Bug 1760658 gets finished.

Comment 6

[Boris Chiou [:boris]]

Bug 1760658 should also fix this bug.