1779799 - Combination of min-content, 1fr and column span creates broken layouts (CSS grid).

Status: NEW

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

Description

[patrick]

Steps to reproduce:

I'm creating a form (labels with fields) based on a CSS grid. The field columns have 1fr. Some fields span several columns. The grid is in a scrollable area (overflow: auto), so to allow (or force) the grid to grow beyond the scrollable area's viewport I set (min-)width: min-content on it. All three options together (the min-content, fields spanning more than one column and the 1fr on some columns) cause either overflow (which the min-content never should from my understanding) or overlapping. I created a JSFiddle to demonstrate three cases: https://jsfiddle.net/Frettman/art5dkp2/24/

Actual results:

The min-content on the grid caused overflow or overlapping.

Expected results:

The min-content on the grid should not cause overflow or overlapping.

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

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

The severity field is not set for this bug.
:emilio, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

I think this is bug 1530097.

Comment 4

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

The severity field is not set for this bug.
:emilio, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case from reporter.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

I think this is a dupe but it'd be good to confirm once bug 1530097 is fixed (which is being looked into atm)