Bug 256047 - Auto-fit grid columns collapsing when container-type set to inline-size
Summary: Auto-fit grid columns collapsing when container-type set to inline-size
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-04-27 09:56 PDT by Darby Dixon III
Modified: 2024-01-04 09:20 PST (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Darby Dixon III 2023-04-27 09:56:09 PDT
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.
Comment 1 Radar WebKit Bug Importer 2023-05-04 09:57:25 PDT
<rdar://problem/108897961>
Comment 2 Rezi 2023-11-27 13:26:06 PST
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.