@@ -2789,55 +2789,34 @@ Flex Container Intrinsic Main Sizes</h4>
27892789
27902790 The <strong> <a>max-content</a> <a>main size</a> of a <a>flex container</a> </strong>
27912791 is the smallest size the <a>flex container</a> can take
2792- while maintaining the [[#intrinsic-item-contributions|max-content contributions]] of its <a>flex items</a> insofar as possible
2793- (but also respecting continuity with zero for 0 < ∑ <var> flex factors </var> < 1) :
2792+ while maintaining the [[#intrinsic-item-contributions|max-content contributions]] of its <a>flex items</a> ,
2793+ insofar as allowed by the items’ own flexibility :
27942794
27952795 <ol>
27962796 <li>
2797- Place all <a>flex items</a> into lines of infinite length.
2797+ For each <a>flex item</a> ,
2798+ subtract its outer <a>flex base size</a> from its [[#intrinsic-item-contributions|max-content contribution]] size.
2799+ If that result is not zero, divide it by (if the result was positive) its <a>flex grow factor</a> floored at 1,
2800+ or (if the result was negative) by its <a>scaled flex shrink factor</a> , having floored the <a>flex shrink factor</a> at 1.
2801+ This is the item's <var> max-content flex fraction</var> .
27982802
27992803 <li>
2800- For each <a>flex item</a> ,
2801- find its <var> max-content flex fraction</var> :
2802- Subtract its outer <a>flex base size</a> from its [[#intrinsic-item-contributions|max-content contribution]] size.
2803- If that result is positive,
2804- divide by its <a>flex grow factor</a> floored at 1;
2805- if negative,
2806- by its <a>flex shrink factor</a> floored at 1
2807- multipled by its <var> flex base ratio</var> --
2808- the ratio of its inner <a>flex base size</a>
2809- to the sum of the inner <a>flex base sizes</a>
2810- of all shrinkable items on the line.
2804+ Place all <a>flex items</a> into lines of infinite length.
28112805
28122806 <li>
28132807 Within each line,
28142808 find the largest <var> max-content flex fraction</var>
28152809 among all the <a>flex items</a> .
2816-
2817- <li>
2818- If the sum of the <a>flex grow factors</a>
2819- (<a>flex shrink factors</a> ,
2820- if the largest <var> max-content flex fraction</var> was negative)
2821- on a line is non-zero but less than one,
2822- divide each <a>flex grow factor</a> (<a>flex shrink factor</a> )
2823- on that line
2824- by their sum to rescale their total to one.
2825-
2826- <li>
2827- Add each item’s outer <a>flex base size</a>
2828- to the product of its <em> rescaled</em> <a>flex grow factor</a>
2829- (or its <em> rescaled</em> <a>flex shrink factor</a>
2830- multiplied by its <var> flex base ratio</var> ,
2831- if the chosen <var> max-content flex fraction</var> was negative)
2810+ Add each item’s <a>flex base size</a>
2811+ to the product of its <a>flex grow factor</a>
2812+ (or <a>scaled flex shrink factor</a> , if the chosen <var> max-content flex fraction</var> was negative)
28322813 and the chosen <var> max-content flex fraction</var> ,
2833- then clamp that resulting item size according to the item’s
2834- <a lt="max main size property">max</a> and
2835- <a>min main size properties</a> .
2814+ then clamp that result by the <a>max main size property</a>
2815+ floored by the <a>min main size property</a> .
28362816
28372817 <li>
28382818 The <a>flex container</a> ’s <a>max-content size</a> is the
2839- largest sum of the afore-calculated outer sizes
2840- of all items within a single line.
2819+ largest sum of the afore-calculated sizes of all items within a single line.
28412820 </ol>
28422821
28432822 The <strong> <a>min-content</a> <a>main size</a> </strong> of a <em> <a>single-line</a> </em> flex container
@@ -2848,6 +2827,40 @@ Flex Container Intrinsic Main Sizes</h4>
28482827 it is simply the largest [[#intrinsic-item-contributions|min-content contribution]]
28492828 of all the <a>flex items</a> in the <a>flex container</a> .
28502829
2830+ <details class=note>
2831+ <summary> Implications of this algorithm when the sum of flex is less than 1</summary>
2832+
2833+ The above algorithm is designed to give the correct behavior for two cases in particular,
2834+ and make the <a>flex container’s</a> size continuous as you transition between the two:
2835+
2836+ 1. If all items are inflexible,
2837+ the flexbox is sized to the sum of their <a>flex base size</a> .
2838+ (An inflexible <a>flex base size</a> basically substitutes for a 'width' /'height' ,
2839+ which, when specified, is what a <a>max content contribution</a> is based on in Block Layout.)
2840+
2841+ 2. When all items are flexible with flexes > 1,
2842+ the flexbox is sized to the sum of the <a>max content contributions</a> of its items
2843+ (or perhaps a slightly larger size,
2844+ so that every flex item is <em> at least</em> the size of its <a>max-content contribution</a> ,
2845+ but also has the correct ratio of its size to the size of the other items,
2846+ as determined by its flexibility).
2847+
2848+ For example, if a <a>flex container</a> has a single <a>flex item</a>
2849+ with ''flex-basis: 100px;'' but a max-content size of ''200px'' ,
2850+ then when the item is ''flex-grow: 0'' , the flexbox (and flex item) is ''100px'' wide,
2851+ but when the item is ''flex-grow: 1'' or higher, the flexbox (and flex item) is ''200px'' wide.
2852+
2853+ There are several possible ways to make the overall behavior continuous between these two cases,
2854+ particularly when the sum of flexibilities on a line is between 0 and 1,
2855+ but all of them have drawbacks.
2856+ We chose one we feel has the least bad implications;
2857+ unfortunately, it "double-applies" the flexibility when the sum of the flexibilities is less than 1.
2858+ In the above example, if the item has ''flex-grow: .5'' ,
2859+ then the flexbox ends up ''150px'' wide,
2860+ but the item then sizes normally into that available space,
2861+ ending up ''125px'' wide.
2862+ </details>
2863+
28512864<h4 id='intrinsic-cross-sizes'>
28522865Flex Container Intrinsic Cross Sizes</h4>
28532866
0 commit comments