Repository navigation
[css-sizing] Intrinsic contribution of fit-content() with cyclic percentages #11805
Description
<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, thenfit-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 as0px, thenfit-content(<length-percentage>)with cyclic percentages is treated asfit-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 asnone, thenfit-content(<length-percentage>)with cyclic percentages is treated asfit-content(calc(1px * infinity))i.e.max-content. - If a
<length-percentage>with cyclic percentages is treated as the automatic size, thenfit-content(<length-percentage>)with cyclic percentages is treated asfit-content, i.e.min-contentfor the min-content contribution andmax-contentfor the max-content contribution. - If a
<length-percentage>with cyclic percentages is treated as the automatic minimum size, thenfit-content(<length-percentage>)with cyclic percentages is treated asmin-content.
Note: the condition never holds in the spec, and almost never holds in browsers.
Activity
layout: Implement the `fit-content()` sizing function
layout: Implement the `fit-content()` sizing function
layout: Implement the `fit-content()` sizing function
layout: Implement the `fit-content()` sizing function (#36056)
css-meeting-bot commentedon Jun 18, 2025
The CSS Working Group just discussed
[css-sizing] Intrinsic contribution of `fit-content()` with cyclic percentages, and agreed to the following:RESOLVED: accept oriol's proposalThe full IRC log of that discussion
<kbabbitt> oriol: fit-content() function isn't super clear what effect should be for intrinsic contributions<kbabbitt> ... for example if you have width property set to a ? amount
<kbabbitt> ... but then max-width is set to fit-content() with percentage
<kbabbitt> ... when you are computing intrinsics, max property contains percentage, treat entire rexpression as initial value
<kbabbitt> ... seems strange because you know fit-content will be ? minimum and maximum\
<kbabbitt> ... fit-content will clamp provided value between min and maximum
<kbabbitt> ... when you use this function as a max size, it's strange to me that we will treat the entire thing as null
<kbabbitt> .. because ofpercentage
<dbaron> s/as null/as none/
<kbabbitt> ... because this can allow much greater sizes even though we clamp to something smaller
<kbabbitt> ... my proposal can be summarized as: what we do for length percentage, then we do the same for just min-content arguments
<kbabbitt> ... but then clamp between min-content and max-content
<iank_> +1 this makes sense to me.
<kbabbitt> ... if entire length-percentage ?? to zero, then will be treated as fit-content of 0
<kbabbitt> ... [reads remainder of proposal in https://github.com//issues/11805#issue-2889260003]
<dbaron> Yeah, I think this makes sense to me too.
<kbabbitt> ... maybe one tricky case
<fantasai> Finished reading the proposal, +1 from me.
<kbabbitt> ... for example if length-percentage with cyclic percentages could be treated as automatic minimum size...
<kbabbitt> ... then you cannot express auto min size with a keyword
<kbabbitt> ... or l-p in fit-content function
<kbabbitt> ... so treat entire thing as min-content
<kbabbitt> ... basically list of cases in the issue
<kbabbitt> ... not sure if people have other opinions
<kbabbitt> ... instead prefer affecting entire expression
<kbabbitt> ... e.g. treat entire function as initial value instead
<dbaron> One tiny detail: is it ever possible for min-content > max-content. If it is (although I hope it isn't), then fit-content(infinity) isn't necessarily equal to max-content.
<kbabbitt> iank_: I think we have enough people in IRC agreeing
<Rossen6> q?
<kbabbitt> Rossen6: any feedback?
<kbabbitt> dbaron: don't think we need to discuss that here, whoever edits can think about it
<kbabbitt> Rossen6: only seeing agreement, any objections?
<kbabbitt> RESOLVED: accept oriol's proposal
[css-sizing-4] Clarify fit-content() with cyclic percentages #11805
fantasai commentedon Oct 8, 2026
Edits are in 77c7337.
@Loirooriol Would you mind confirming if they're correct?
Loirooriol commentedon Oct 10, 2026
I think that's good, but https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution may need to clarify that it refers to a
<length-percentage>when it says "the entire value of a min/max/preferred size property". Otherwise it can seem to include thefit-content()too.