Skip to content

[css-sizing] Clarify contain-intrinsic-size with multicolumn/grid #7520

@Loirooriol

Description

@Loirooriol
<div style="contain: size; contain-intrinsic-size: 30px; width: max-content; border: solid;
            column-count: 3; column-gap: 10px"></div>

In Blink this results in a multicol container which is 30px tall and 110px wide.

That is, contain-intrinsic-width sets the width of the columns to 30px, then 30px * 3 + 2 * 10px = 110px.

Is this correct, or should contain-intrinsic-width already include gaps and multiple columns?

It's the opposite in grid:

<div style="contain: size; contain-intrinsic-size: 30px; width: max-content; border: solid;
            display: grid; grid-template-columns: 50px 50px 50px; column-gap: 10px"></div>

Here the grid container is 30px tall and wide.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Tuesday

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions