Skip to content

Commit 66241e4

Browse files
committed
[css-flexbox-1] Clarify that min/max clamping uses used values. #2442
1 parent cfdc4a2 commit 66241e4

File tree

1 file changed

+34
-14
lines changed

1 file changed

+34
-14
lines changed

css-flexbox-1/Overview.bs

+34-14
Original file line numberDiff line numberDiff line change
@@ -455,9 +455,14 @@ Flex Layout Box Model and Terminology</h2>
455455
The width or height of a <a>flex container</a> or <a>flex item</a>,
456456
whichever is in the <a>main dimension</a>,
457457
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
459459
thus either its 'width' or 'height' property,
460460
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>.
461466
</dl>
462467

463468
<dl id="cross" export>
@@ -480,9 +485,14 @@ Flex Layout Box Model and Terminology</h2>
480485
The width or height of a <a>flex container</a> or <a>flex item</a>,
481486
whichever is in the <a>cross dimension</a>,
482487
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
484489
thus either its 'width' or 'height' property,
485490
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>.
486496
</dl>
487497

488498
Additional sizing terminology used in this specification
@@ -2408,7 +2418,7 @@ Line Length Determination</h3>
24082418
</ol>
24092419

24102420
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
24122422
(no clamping occurs).
24132423
Furthermore, the sizing calculations that floor the content box size at zero
24142424
when applying 'box-sizing' are also ignored.
@@ -2418,7 +2428,7 @@ Line Length Determination</h3>
24182428
and hence a negative inner <a>flex base size</a>.)
24192429

24202430
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>
24222432
(and flooring the content box size at zero).
24232433

24242434
<li id='algo-main-container'>
@@ -2507,7 +2517,8 @@ Cross Size Determination</h3>
25072517
The used cross-size of the <a>flex line</a> is the largest of the numbers found in the previous two steps and zero.
25082518

25092519
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>.
25112522
<span class='note'>Note that if CSS 2.1's definition of min/max-width/height applied more generally,
25122523
this behavior would fall out automatically.</span>
25132524
</ol>
@@ -2549,7 +2560,7 @@ Cross Size Determination</h3>
25492560
its computed cross size property is <a value for=width>auto</a>,
25502561
and neither of its cross-axis margins are <a value for=margin>auto</a>,
25512562
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>.
25532564
Otherwise,
25542565
the used cross size is the item's <a>hypothetical cross size</a>.
25552566

@@ -2618,12 +2629,14 @@ Cross-Axis Alignment</h3>
26182629
<li>
26192630
If the cross size property is a <a>definite</a> size,
26202631
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>.
26222634

26232635
<li>
26242636
Otherwise,
26252637
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>.
26272640
</ul>
26282641

26292642
<li id='algo-line-align'>
@@ -2721,7 +2734,8 @@ Resolving Flexible Lengths</h3>
27212734

27222735
<li>
27232736
<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>
27252739
and floor its content-box size at zero.
27262740
If the item's <a>target main size</a> was made smaller by this,
27272741
it's a max violation.
@@ -2847,8 +2861,8 @@ Flex Container Intrinsic Main Sizes</h4>
28472861
to the product of its <a>flex grow factor</a>
28482862
(or <a>scaled flex shrink factor</a>, if the chosen <var>max-content flex fraction</var> was negative)
28492863
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>.
28522866

28532867
<li>
28542868
The <a>flex container</a>’s <a>max-content size</a> is the
@@ -2932,14 +2946,14 @@ Flex Item Intrinsic Size Contributions</h4>
29322946
if that is not ''width/auto'',
29332947
clamped by its <a>flex base size</a> as a maximum (if it is not growable)
29342948
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>.
29362950

29372951
The <strong>main-size <a>max-content contribution</a> of a <a>flex item</a></strong>
29382952
is the larger of its <em>outer</em> <a>max-content size</a>
29392953
and outer <a>preferred size</a> (its 'width'/'height' as appropriate)
29402954
clamped by its <a>flex base size</a> as a maximum (if it is not growable)
29412955
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>.
29432957

29442958
<!--
29452959
████████ ████████ ███ ██████ ██ ██ ████████ ██ ██ ████████ ████ ██ ██ ██████
@@ -3561,6 +3575,13 @@ Changes since the 16 October 2017 CR</h3>
35613575
(<a href="https://github.com/w3c/csswg-drafts/issues/2230">Issue 2230</a>,
35623576
<a href="https://github.com/w3c/csswg-drafts/issues/2248">Issue 2248</a>)
35633577

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+
35643585
<li>
35653586
Some minor editorial fixes and clarifications.
35663587
</ul>
@@ -3599,7 +3620,6 @@ Substantive Changes and Bugfixes</h4>
35993620
</p>
36003621
<p>
36013622
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.
36033623
clamped according to its min and max main size properties
36043624
<ins>(and flooring the content box size at zero)</ins>.
36053625
</p>

0 commit comments

Comments
 (0)