Skip to content

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

Open
@Loirooriol

Description

@Loirooriol
<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, then the entire value of any max size property or preferred size property (width/max-width/height/max-height) specified as an expression containing a percentage (such as 10% or calc(10px + 0%)) that is cyclic is treated for the purpose of calculating the box’s intrinsic size contributions only as that property’s 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 [css-sizing] Nobody follows the spec about cyclic percentages in min sizing properties #10969 and [css-sizing] Nobody follows the spec about cyclic percentages in preferred&max sizing properties of replaced element #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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Regular agenda

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions