Skip to content

Commit

Permalink
[css-flexbox-1] Mark intrinsic sizing algorithm as having Web-compat …
Browse files Browse the repository at this point in the history
…issues. #8884
  • Loading branch information
fantasai committed Jan 10, 2025
1 parent e455b58 commit 5c81809
Showing 1 changed file with 42 additions and 13 deletions.
55 changes: 42 additions & 13 deletions css-flexbox-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -2878,15 +2878,32 @@ Intrinsic Sizes</h3>
Flex Container Intrinsic Main Sizes</h4>

The <strong><a>max-content</a> <a>main size</a> of a <a>flex container</a></strong>
is, fundamentally, the smallest size the <a>flex container</a> can take
is, theoretically, the smallest size the <a>flex container</a> can take
such that when flex layout is run with that container size,
each [=flex item=] ends up at least as large as
its [[#intrinsic-item-contributions|max-content contribution]],
to the extent allowed by the items’ flexibility.

It is calculated,
considering only non-[=collapsed=] [=flex items=],
by:
The <strong>[=min-content=] [=main size=] is, theoretically,
the smallest size the [=flex container can take=]
such that no items overflow it,
and no item's contents overflow the item--
setting aside the cases in which the boxes layouts are <em>defined</em> to overflow
(for example with negative margins or percentage sizes that add up to more than 100%).

<h5 id='intrinsic-main-sizes-ideal'>
Ideal Algorithm</h5>

Note: The following algorithm calculates the [=flex container=]’s ideal
intrinsic [=main sizes=].
However, because it was not implemented correctly initially,
and existing content became dependent on the (unfortunately consistent) incorrect implemented behavior,
<a href="https://github.com/w3c/csswg-drafts/issues/8884">it is not Web-compatible</a>.
Implementers and the CSS Working Group are investigating to what extent
Web browser implementations can safely approach this behavior,
and further experimentation is welcome.

Considering only non-[=collapsed=] [=flex items=];

<ol>
<li>
Expand Down Expand Up @@ -2940,15 +2957,6 @@ Flex Container Intrinsic Main Sizes</h4>
except that the <a>flex items</a>[[#intrinsic-item-contributions|min-content contributions]] are used
instead of their [[#intrinsic-item-contributions|max-content contributions]].

However, for a <em><a>multi-line</a></em> container,
the [=min-content=] [=main size=] is simply the largest [[#intrinsic-item-contributions|min-content contribution]]
of all the non-[=collapsed=] <a>flex items</a> in the <a>flex container</a>.
For this purpose,
each item's contribution
is capped by the item’s [=flex base size=] if the item is not growable,
floored by the item’s [=flex base size=] if the item is not shrinkable,
and then further clamped by the item's min and max main sizes.

<details class=note>
<summary>Implications of this algorithm when the sum of flex is less than 1</summary>

Expand Down Expand Up @@ -3029,6 +3037,27 @@ Flex Container Intrinsic Main Sizes</h4>
</details>
</details>

<h5 id="intrinsic-main-sizes-compat">
Web-compatible Intrinsic Sizing Algorithm</h5>

Note: The following algorithm has been demonstrated to be Web-compatible.
It may be altered in the future to bring it closer to the ideal algorithm above,
if possible.

ISSUE(8884): Outline Web-compatible algorithm here, once we have one.

<h5 id="intrinsic-main-sizes-multiline">
Multi-line Min-content Algorithm</h5>

For a <em><a>multi-line</a></em> container,
the [=min-content=] [=main size=] is simply the largest [[#intrinsic-item-contributions|min-content contribution]]
of all the non-[=collapsed=] <a>flex items</a> in the <a>flex container</a>.
For this purpose,
each item's contribution
is capped by the item’s [=flex base size=] if the item is not growable,
floored by the item’s [=flex base size=] if the item is not shrinkable,
and then further clamped by the item's min and max main sizes.

<h4 id='intrinsic-cross-sizes'>
Flex Container Intrinsic Cross Sizes</h4>

Expand Down

0 comments on commit 5c81809

Please sign in to comment.