w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.42k stars 652 forks source link

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

Open Loirooriol opened 2 years ago

Loirooriol commented 2 years ago
<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.

css-meeting-bot commented 2 years ago

The CSS Working Group just discussed Clarify contain-intrinsic-size with multicol/grid, and agreed to the following:

The full IRC log of that discussion <fantasai> Subtopic: Clarify contain-intrinsic-size with multicol/grid
<fantasai> github: https://github.com/w3c/csswg-drafts/issues/7520
<fantasai> oriol: spec defines c-i-s as setting the intrinsic inner size
<fantasai> oriol: then it says that this causes the box to size as if its in-flow contents ...
<fantasai> oriol: but what exactly are its in-flow contents?
<fantasai> oriol: multicol container or grid container
<fantasai> oriol: in a multicol container, the size, it sets the width of the box
<fantasai> oriol: but if you have columns or tracks, the total width of the column/container will be bigger than that
<fantasai> oriol: in ?? it's the opposite,
<fantasai> oriol: but here, c-i-s, was setting the content size of the grid
<vmpstr> s/??/grid/
<fantasai> oriol: ...
<fantasai> oriol: I don't think it's completely clear, and I want to have a resolution on this
<iank_> our multi-col intrinsic sizing isn't particularly good in this respect.
<fantasai> TabAtkins: the Grid behavior is correct. Multicol is wrong
<fantasai> TabAtkins: we didn't think about multicol when writing this, but thought about grid, and ignoring the grid stuff is the intended behavior
<fantasai> TabAtkins: multicol should be fixed, and get a clarification in the spec to make extra clear
<fantasai> oriol: if you specify c-i-s: none and then in grid it may become greater than zero
<fantasai> oriol: if you have .e.g. fixed tracks
<fantasai> oriol: but if you specify c-i-s: zero
<fantasai> oriol: then it will override grid template properties?
<fantasai> TabAtkins: correct
<fantasai> TabAtkins: If no setting the size, you pretend no children, but grid is still there
<fantasai> TabAtkins: but if set a size, you get that size
<fantasai> fantasai: what's the behavior with multicol?
<fantasai> TabAtkins: if you set c-i-s to a length, you get that size, not size of columns
<fantasai> fantasai: columns are usually less fixed-size than fixed-size columns anyway
<fantasai> Rossen_: is that the only clarification we need?
<fantasai> TabAtkins: this isn't a clarification for multicol specification, just make clear that things such as multicol or grid don't do anything special, size just gets overridden
<fantasai> Rossen_: what's the proposed resolution?
<fantasai> TabAtkins: clarify spec that layout systems that can have sizing effects even with empty children don't matter, c-i-s overrides all of that and sets a particular content size
<fantasai> RESOLVED: Clarify that setting c-i-s to a size overrides the content size, even if there is other sizing info such as grid column widths