Bug 256047 – Auto-fit grid columns collapsing with inline-size containment

• Component: CSS
• Status: RESOLVED FIXED

[Darby Dixon III]

Element with container-type: inline-size, display: grid, and auto-fit grid-template-columns collapses grid column widths to 0

Minimal error case:

https://codepen.io/darby3/pen/vYVZZEe

Summary: I have an element set to display: grid, with auto-fit columns. This works as expected.

As soon as I add container-type: inline-size, the grid width (column widths) collapse to 0 width. Switching to auto-fill columns, however, the columns work as expected.

While I didn't reproduce here, setting container-type to size appears to also collapse the height of the grid rows to 0.

I've noted mac apple silicon / macos above, but I've reports of this error on an iphone as well.

[Radar WebKit Bug Importer]

<rdar://problem/108897961>

[Rezi]

Issue is still present. Can be solved by moving container query to grid's wrapper element (which can cause bad semantics).
The buggy Safari behavior works fine on Chrome and Firefox.
It would be great if resolved soon.

[Karl Dubost]

Created attachment 470948 [details]
rendering in safari, firefox, chrome

Tested in 
Safari Technology Preview  192           19619.1.8.1
Firefox Nightly            126.0a1       12624.4.13
Google Chrome Canary       125.0.6422.0  6422.0

[Karl Dubost]

This might need a WPT test case.

[Antti Koivisto]

This is a containment bug, not  a container query bug.

Replacing

  container-type: inline-size;

in the test case with

  contain: inline-size;

still reproduces the issue.

[Antti Koivisto]

Created attachment 470954 [details]
test case

[Ole Jørgen Bakken]

Any news on this?

We're trying to create a card that responds to container size to show/hide more content, and this makes it quite difficult.

[Sammy Gill]

Pull request: https://github.com/WebKit/WebKit/pull/45279

[Sammy Gill]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/52606

[EWS]

Committed 295023@main (348ac9f493b2): <https://commits.webkit.org/295023@main>

Reviewed commits have been landed. Closing PR #45279 and removing active labels.