Skip to content

Commit d452a10

Browse files
committed
[css-flexbox-1] Separate out the positive and negative cases to avoid explosions in either. w3c#7189
1 parent bdebc28 commit d452a10

File tree

1 file changed

+61
-9
lines changed

1 file changed

+61
-9
lines changed

css-flexbox-1/Overview.bs

+61-9
Original file line numberDiff line numberDiff line change
@@ -2910,10 +2910,12 @@ Flex Container Intrinsic Main Sizes</h4>
29102910
For each <a>flex item</a>,
29112911
subtract its outer <a>flex base size</a> from its [[#intrinsic-item-contributions|max-content contribution]] size.
29122912
If that result is positive,
2913-
divide by its <a>flex grow factor</a>
2914-
(if dividing by zero, treat the result as infinity);
2915-
if negative,
2916-
divide by its <a>scaled flex shrink factor</a>
2913+
divide it by the item's <a>flex grow factor</a>
2914+
if the <a>flex grow factor</a> is &ge; 1,
2915+
or multiply it by the <a>flex grow factor</a>
2916+
if the <a>flex grow factor</a> is < 1;
2917+
if the result is negative,
2918+
divide it by the item's <a>scaled flex shrink factor</a>
29172919
(if dividing by zero, treat the result as negative infinity).
29182920
This is the item's <var>desired flex fraction</var>.
29192921

@@ -2926,9 +2928,13 @@ Flex Container Intrinsic Main Sizes</h4>
29262928
This is the line’s <var>chosen flex fraction</var>.
29272929

29282930
<li>
2929-
If the sum of the line’s <a>flex grow factors</a>
2930-
(<a>flex shrink factors</a>,
2931-
if the <var>chosen flex fraction</var> is negative)
2931+
If the <var>chosen flex fraction</var> is positive,
2932+
and the sum of the line’s <a>flex grow factors</a>
2933+
is less than 1,
2934+
divide the <var>chosen flex fraction</var> by that sum.
2935+
2936+
If the <var>chosen flex fraction</var> is negative,
2937+
and the sum of the line’s <a>flex shrink factors</a>
29322938
is less than 1,
29332939
multiply the <var>chosen flex fraction</var> by that sum.
29342940

@@ -2984,14 +2990,60 @@ Flex Container Intrinsic Main Sizes</h4>
29842990
but when the item is ''flex-grow: 1'' or higher, the <a>flex container</a> (and flex item) is ''200px'' wide.
29852991

29862992
There are several possible ways to make the overall behavior continuous between these two cases,
2987-
particularly when the sum of flexibilities on a line is between 0 and 1,
29882993
but all of them have drawbacks.
29892994
We chose one we feel has the least bad implications;
2990-
unfortunately, it "double-applies" the flexibility when the sum of the flexibilities is less than 1.
2995+
unfortunately, it "double-applies" the flexibility in cases with [=flex factors=] that are < 1.
29912996
In the above example, if the item has ''flex-grow: .5'',
29922997
then the <a>flex container</a> ends up ''150px'' wide,
29932998
but the item then sizes normally into that available space,
29942999
ending up ''125px'' wide.
3000+
3001+
<details class=note>
3002+
<summary>Even more involved notes on the specific behavior chosen</summary>
3003+
3004+
Principles:
3005+
3006+
1. Don't explode any sizes, whether growing or shrinking, as inputs approach zero.
3007+
2. When flex factors are all >=1, return the minimum size necessary for every item to be >= max-content size.
3008+
3. Items with a zero flex shouldn't affect the sizes at all.
3009+
4. Keep it continuous over variance of flex factors and item sizes.
3010+
5. Keep sizing variance as linear as possible with respect to linear changes to any input variable (size, flex factor).
3011+
6. When the sum of flex factors is >=1, return the minimum size necessary for every item to be >= max-content size.
3012+
3013+
To get these all to work together,
3014+
we have to apply some correction when either flex factors
3015+
or the sum of flex factors on a line
3016+
is < 1.
3017+
3018+
For shrink our behavior is somewhat easier;
3019+
since the explosive case of 0 shrink
3020+
results in a negative infinity desired fraction
3021+
which we'll never choose (since we always take the largest),
3022+
we can just apply the correction at the line level,
3023+
giving us double-application only when the sum is < 1.
3024+
3025+
For positives it's more complicated.
3026+
0 grow naively explodes into *positive* infinity,
3027+
which we'd choose,
3028+
so we need to apply the correction at the individual item level.
3029+
We do that by multiplying the space by the factor when factor is <1.
3030+
Leaving it at that would result in a double-application for items < 1
3031+
but sum >= 1,
3032+
but a *triple*-application when the sum is < 1.
3033+
To avoid *that* ridiculousness,
3034+
we apply a *reverse* correction when the sum is 1,
3035+
dividing by the sum instead.
3036+
This leaves us with a double correction in all cases for items with factors < 1.
3037+
3038+
We can't eliminate the double-applications entirely
3039+
without giving up other, more important principles
3040+
(in particular, principle 3 --
3041+
try to come up with rules that don't double-apply
3042+
when you have two items with ''flex-grow: .5'',
3043+
but also don't give a ''flex-grow: 0'' item any power
3044+
over a ''flex-grow: 1'' sibling;
3045+
you can't, as far as we can tell.)
3046+
</details>
29953047
</details>
29963048

29973049
<h4 id='intrinsic-cross-sizes'>

0 commit comments

Comments
 (0)