@@ -455,9 +455,14 @@ Flex Layout Box Model and Terminology</h2>
455
455
The width or height of a <a>flex container</a> or <a>flex item</a> ,
456
456
whichever is in the <a>main dimension</a> ,
457
457
is that box’s <dfn lt="main size|main-size">main size</dfn> .
458
- Its <dfn lt="main size property|max main size property|min main size property" >main size property</dfn> is
458
+ Its <dfn>main size property</dfn> is
459
459
thus either its 'width' or 'height' property,
460
460
whichever is in the <a>main dimension</a> .
461
+ Similarly, its <dfn lt="min main size property">min</dfn> and
462
+ <dfn lt="max main size property">max main size properties</dfn>
463
+ are its 'min-width' /'max-width' or 'min-height' /'max-height' properties,
464
+ whichever is in the <a>main dimension</a> ,
465
+ and determine its <dfn lt="min main size">min</dfn> /<dfn>max main size</dfn> .
461
466
</dl>
462
467
463
468
<dl id="cross" export>
@@ -480,9 +485,14 @@ Flex Layout Box Model and Terminology</h2>
480
485
The width or height of a <a>flex container</a> or <a>flex item</a> ,
481
486
whichever is in the <a>cross dimension</a> ,
482
487
is that box’s <dfn lt="cross size | cross-size">cross size</dfn> .
483
- Its <dfn lt="cross size property|max cross size property|min cross size property" >cross size property</dfn> is
488
+ Its <dfn>cross size property</dfn> is
484
489
thus either its 'width' or 'height' property,
485
490
whichever is in the <a>cross dimension</a> .
491
+ Similarly, its <dfn lt="min cross size property">min</dfn> and
492
+ <dfn lt="max cross size property">max cross size properties</dfn>
493
+ are its 'min-width' /'max-width' or 'min-height' /'max-height' properties,
494
+ whichever is in the <a>cross dimension</a> ,
495
+ and determine its <dfn lt="min cross size">min</dfn> /<dfn>max cross size</dfn> .
486
496
</dl>
487
497
488
498
Additional sizing terminology used in this specification
@@ -2408,7 +2418,7 @@ Line Length Determination</h3>
2408
2418
</ol>
2409
2419
2410
2420
When determining the <a>flex base size</a> ,
2411
- the item’s min and max main size properties are ignored
2421
+ the item’s min and max <a> main sizes</a> are ignored
2412
2422
(no clamping occurs).
2413
2423
Furthermore, the sizing calculations that floor the content box size at zero
2414
2424
when applying 'box-sizing' are also ignored.
@@ -2418,7 +2428,7 @@ Line Length Determination</h3>
2418
2428
and hence a negative inner <a>flex base size</a> .)
2419
2429
2420
2430
The <a>hypothetical main size</a> is the item's <a>flex base size</a>
2421
- clamped according to its min and max main size properties
2431
+ clamped according to its <a lt="used value">used</a> min and max <a> main sizes</a>
2422
2432
(and flooring the content box size at zero).
2423
2433
2424
2434
<li id='algo-main-container'>
@@ -2507,7 +2517,8 @@ Cross Size Determination</h3>
2507
2517
The used cross-size of the <a>flex line</a> is the largest of the numbers found in the previous two steps and zero.
2508
2518
2509
2519
If the flex container is <a>single-line</a> ,
2510
- then clamp the line's cross-size to be within the container's computed min and max cross-size properties.
2520
+ then clamp the line's cross-size to be within
2521
+ the container's computed min and max <a>cross sizes</a> .
2511
2522
<span class='note'> Note that if CSS 2.1's definition of min/max-width/height applied more generally,
2512
2523
this behavior would fall out automatically.</span>
2513
2524
</ol>
@@ -2549,7 +2560,7 @@ Cross Size Determination</h3>
2549
2560
its computed cross size property is <a value for=width>auto</a> ,
2550
2561
and neither of its cross-axis margins are <a value for=margin>auto</a> ,
2551
2562
the used outer cross size is the used cross size of its flex line,
2552
- clamped according to the item's min and max cross size properties .
2563
+ clamped according to the item's used min and max <a> cross sizes</a> .
2553
2564
Otherwise,
2554
2565
the used cross size is the item's <a>hypothetical cross size</a> .
2555
2566
@@ -2618,12 +2629,14 @@ Cross-Axis Alignment</h3>
2618
2629
<li>
2619
2630
If the cross size property is a <a>definite</a> size,
2620
2631
use that,
2621
- clamped by the min and max cross size properties of the <a>flex container</a> .
2632
+ clamped by the used min and max <a>cross sizes</a>
2633
+ of the <a>flex container</a> .
2622
2634
2623
2635
<li>
2624
2636
Otherwise,
2625
2637
use the sum of the flex lines' cross sizes,
2626
- clamped by the min and max cross size properties of the <a>flex container</a> .
2638
+ clamped by the used min and max <a>cross sizes</a>
2639
+ of the <a>flex container</a> .
2627
2640
</ul>
2628
2641
2629
2642
<li id='algo-line-align'>
@@ -2721,7 +2734,8 @@ Resolving Flexible Lengths</h3>
2721
2734
2722
2735
<li>
2723
2736
<strong> Fix min/max violations.</strong>
2724
- Clamp each non-frozen item's <a>target main size</a> by its min and max main size properties
2737
+ Clamp each non-frozen item's <a>target main size</a> by
2738
+ its <a lt="used value">used</a> min and max <a>main sizes</a>
2725
2739
and floor its content-box size at zero.
2726
2740
If the item's <a>target main size</a> was made smaller by this,
2727
2741
it's a max violation.
@@ -2847,8 +2861,8 @@ Flex Container Intrinsic Main Sizes</h4>
2847
2861
to the product of its <a>flex grow factor</a>
2848
2862
(or <a>scaled flex shrink factor</a> , if the chosen <var> max-content flex fraction</var> was negative)
2849
2863
and the chosen <var> max-content flex fraction</var> ,
2850
- then clamp that result by the <a>max main size property </a>
2851
- floored by the <a>min main size property </a> .
2864
+ then clamp that result by the <a>max main size</a>
2865
+ floored by the <a>min main size</a> .
2852
2866
2853
2867
<li>
2854
2868
The <a>flex container</a> ’s <a>max-content size</a> is the
@@ -2932,14 +2946,14 @@ Flex Item Intrinsic Size Contributions</h4>
2932
2946
if that is not ''width/auto'' ,
2933
2947
clamped by its <a>flex base size</a> as a maximum (if it is not growable)
2934
2948
and/or as a minimum (if it is not shrinkable),
2935
- and then further clamped by its <a lt="min main size property ">min</a> /<a>max main size properties </a> .
2949
+ and then further clamped by its <a lt="min main size">min</a> /<a>max main size</a> .
2936
2950
2937
2951
The <strong> main-size <a>max-content contribution</a> of a <a>flex item</a> </strong>
2938
2952
is the larger of its <em> outer</em> <a>max-content size</a>
2939
2953
and outer <a>preferred size</a> (its 'width' /'height' as appropriate)
2940
2954
clamped by its <a>flex base size</a> as a maximum (if it is not growable)
2941
2955
and/or as a minimum (if it is not shrinkable),
2942
- and then further clamped by its <a lt="min main size property ">min</a> /<a>max main size properties </a> .
2956
+ and then further clamped by its <a lt="min main size">min</a> /<a>max main size</a> .
2943
2957
2944
2958
<!--
2945
2959
████████ ████████ ███ ██████ ██ ██ ████████ ██ ██ ████████ ████ ██ ██ ██████
@@ -3561,6 +3575,13 @@ Changes since the 16 October 2017 CR</h3>
3561
3575
(<a href="https://github.com/w3c/csswg-drafts/issues/2230">Issue 2230</a> ,
3562
3576
<a href="https://github.com/w3c/csswg-drafts/issues/2248">Issue 2248</a> )
3563
3577
3578
+ <li id="change-2017-used-min-sizes">
3579
+ Clarified that min/max clamping is according to the <a>used value</a>
3580
+ of the min/max size properties--
3581
+ which in the case of tables with ''table-layout/auto'' layout,
3582
+ is floored by the table’s <a>min-content size</a> .
3583
+ (<a href="https://github.com/w3c/csswg-drafts/issues/2442">Issue 2442</a> )
3584
+
3564
3585
<li>
3565
3586
Some minor editorial fixes and clarifications.
3566
3587
</ul>
@@ -3599,7 +3620,6 @@ Substantive Changes and Bugfixes</h4>
3599
3620
</p>
3600
3621
<p>
3601
3622
The <a>hypothetical main size</a> is the item's <a>flex base size</a>
3602
- clamped according to its min and max main size properties.
3603
3623
clamped according to its min and max main size properties
3604
3624
<ins> (and flooring the content box size at zero)</ins> .
3605
3625
</p>
0 commit comments