[csswg-drafts] [css-sizing] Intrinsic contribution of `fit-content()` with cyclic percentages (#11805)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing] Intrinsic contribution of `fit-content()` with cyclic percentages ==
```html
<div id="a" style="width: max-content">
  <div id="b" style="display: flow-root; width: 1000px; max-width: fit-content(100px + 100%)">
    <div style="float: left; width: 25px"></div>
    <div style="float: left; width: 25px"></div>
  </div>
</div>
```

According to https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution

> If the box is [non-replaced](https://drafts.csswg.org/css-display-4/#non-replaced), then the entire value of any [max size property](https://drafts.csswg.org/css-sizing-3/#max-size-properties) or [preferred size property](https://drafts.csswg.org/css-sizing-3/#preferred-size-properties) ([width](https://drafts.csswg.org/css-sizing-3/#propdef-width)/[max-width](https://drafts.csswg.org/css-sizing-3/#propdef-max-width)/[height](https://drafts.csswg.org/css-sizing-3/#propdef-height)/[max-height](https://drafts.csswg.org/css-sizing-3/#propdef-max-height)) specified as an expression [containing a percentage](https://drafts.csswg.org/css-values-4/#css-contain-a-percentage) (such as 10% or calc(10px + 0%)) that is [cyclic](https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-size) is treated for the purpose of calculating the box’s [intrinsic size contributions](https://drafts.csswg.org/css-sizing-3/#intrinsic-size-contribution) only as that property’s [initial value](https://drafts.csswg.org/css-cascade-5/#initial-value).

This means that the intrinsic min/max-content contributions of `#b` are `1000px`.

But does this make sense? Once `#b` is laid out with a `1000px` wide containing block, its size will resolve to `50px`. It's normal for the intrinsic contributions to not match the final size, but here it looks weird since we know `50px` will be an upper limit. Also, in #10721 there are 2 proposals under consideration, but both treat `max-width: fit-content` as `max-content` when computing the max-content contribution. So if we do that for `fit-content`, it seems we should do the same for a cyclic `fit-content()`.

Then, proposal:

 - If a `<length-percentage>` would resolve cyclic percentages against zero, then `fit-content(<length-percentage>)` resolves cyclic percentages against zero.
   Note: the condition never holds in browsers, but it does in the spec. See #10969 and #11452.
 - If a `<length-percentage>` with cyclic percentages is treated as `0px`, then `fit-content(<length-percentage>)` with cyclic percentages is treated as `fit-content(0px)` i.e. `min-content`.
   Note: the condition never holds in the spec, but it does in browsers.
 - If a `<length-percentage>` with cyclic percentages is treated as `none`, then `fit-content(<length-percentage>)` with cyclic percentages is treated as `fit-content(calc(1px * infinity))` i.e. `max-content`.
 - If a `<length-percentage>` with cyclic percentages is treated as the automatic size, then `fit-content(<length-percentage>)` with cyclic percentages is treated as `fit-content`, i.e. `min-content` for the min-content contribution and `max-content` for the max-content contribution.
 - If a `<length-percentage>` with cyclic percentages is treated as the automatic minimum size, then `fit-content(<length-percentage>)` with cyclic percentages is treated as `min-content`.
   Note: the condition never holds in the spec, and almost never holds in browsers.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11805 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 2 March 2025 01:25:45 UTC