@@ -28,6 +28,7 @@ Former Editor: Ian Hickson, formerly of Opera Software, ian@hixie.ch
2828Former Editor : David Hyatt, formerly of Netscape Corporation, hyatt@apple.com
2929!Issues List : <a href="http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925">http://dev.w3.org/csswg/css-flexbox-1/issues-lc-20140925</a>
3030Ignored Terms : column-*, auto, first formatted line, first letter, static position
31+ Ignored Vars : item’s own max-content, maximum min-content among all items
3132</pre>
3233
3334<pre class='link-defaults'>
@@ -440,7 +441,7 @@ Flex Layout Box Model and Terminology</h2>
440441 <dd>
441442 A <a>flex item</a> ’s width or height,
442443 whichever is in the <a>main dimension</a> ,
443- is the item's <dfn>main size</dfn> .
444+ is the item's <dfn lt="main size|main-size" >main size</dfn> .
444445 The <a>flex item</a> ’s <dfn lt="main size property|max main size property|min main size property">main size property</dfn> is
445446 either the 'width' or 'height' property,
446447 whichever is in the <a>main dimension</a> .
@@ -465,7 +466,7 @@ Flex Layout Box Model and Terminology</h2>
465466 <dd>
466467 The width or height of a <a>flex item</a> ,
467468 whichever is in the <a>cross dimension</a> ,
468- is the item's <dfn>cross size</dfn> .
469+ is the item's <dfn lt="cross size | cross-size" >cross size</dfn> .
469470 The <dfn lt="cross size property|max cross size property|min cross size property">cross size property</dfn> is
470471 whichever of 'width' or 'height' that is in the <a>cross dimension</a> .
471472 </dl>
@@ -2721,6 +2722,12 @@ Intrinsic Sizes</h3>
27212722 such as shrink-to-fit logical widths (which use the ''fit-content'' formula)
27222723 and content-based logical heights (which use the <a>max-content main size</a> ).
27232724
2725+
2726+ See [[!CSS3-SIZING]] for a definition of the terms in this section.
2727+
2728+ <h4 id='intrinsic-main-sizes'>
2729+ Flex Container Intrinsic Main Sizes</h4>
2730+
27242731 The <dfn>max-content main size</dfn> of a <a>flex container</a>
27252732 is the smallest size the <a>flex container</a> can take
27262733 while maintaining the <a>max-content contributions</a> of its <a>flex items</a> :
@@ -2750,42 +2757,49 @@ Intrinsic Sizes</h3>
27502757 largest sum of the afore-calculated sizes of all items within a single line.
27512758 </ol>
27522759
2753- The <dfn>min-content main size</dfn> of a <a>single-line</a> flex container
2760+ The <dfn>min-content main size</dfn> of a <em> < a>single-line</a> </em >
27542761 is calculated identically to the <a>max-content main size</a> ,
27552762 except that the <a>flex item’s</a> <a>min-content contribution</a> is used
27562763 instead of its <a>max-content contribution</a> .
2757- However, for a <a>multi-line</a> container,
2764+ However, for a <em> < a>multi-line</a> </em >
27582765 it is simply the largest <a>min-content contribution</a>
27592766 of all the <a>flex items</a> in the <a>flex container</a> .
27602767
2761- The <dfn>min-content cross size</dfn> and <dfn>max-content cross size</dfn> of a <a>single-line</a> <a>flex container</a>
2768+ <h4 id='intrinsic-cross-sizes'>
2769+ Flex Container Intrinsic Cross Sizes</h4>
2770+
2771+ The <dfn>min-content cross size</dfn> and <dfn>max-content cross size</dfn> of a <em> <a>single-line</a> </em> <a>flex container</a>
27622772 is the largest <a>min-content contribution</a> or <a>max-content contribution</a> (respectively)
27632773 of its <a>flex items</a> .
2764- For a <a>multi-line</a> <a>flex container</a> ,
2774+
2775+ For a <em> <a>multi-line</a> </em> <a>flex container</a> ,
27652776 the <a>min-content cross size</a> /<a>max-content cross size</a>
2766- are the sum of the flex line cross sizes
2767- resulting from sizing the flex container under a <a>cross-axis</a> <a>min-content constraint</a> /<a>max-content constraint</a> , respectively.
2768-
2769- For the purposes of the preceding paragraph,
2770- if the <a>flex container</a> is ''flex-flow: column wrap;'' ,
2771- then it's sized by first finding the largest <a lt="min-content contribution">min-content</a> or <a>max-content contribution</a>
2772- as appropriate,
2773- among the <a>flex items</a> ,
2774- then using that size as the <a>available space</a> in the <a>cross axis</a> for all of the <a>flex items</a> during layout.
2775-
2776- Note: This gives a reasonable approximation of the size that the flex container should be.
2777- It's not a <em> perfect</em> fit in some degenerate cases,
2777+ is the sum of the flex line cross sizes
2778+ resulting from sizing the flex container under a <a>cross-axis</a> <a>min-content constraint</a> /<a>max-content constraint</a> (respectively).
2779+ However, if the <a>flex container</a> is ''flex-flow: column wrap;'' ,
2780+ then it's sized by first finding the largest
2781+ <a lt="min-content contribution">min-content</a> /<a lt="min-content contribution">max-content</a>
2782+ <a>cross-size</a> contribution among the <a>flex items</a> (respectively),
2783+ then using that size as the <a>available space</a> in the <a>cross axis</a>
2784+ for each of the <a>flex items</a> during layout.
2785+
2786+ Note: This heuristic for ''column wrap'' <a>flex containers</a>
2787+ gives a reasonable approximation of the size that the <a>flex container</a> should be,
2788+ with each flex item ending up as min(<var> item’s own max-content</var> , <var> maximum min-content among all items</var> ),
2789+ and each <a>flex line</a> no larger than its largest <a>flex item</a> .
2790+ It's not a <em> perfect</em> fit in some cases,
27782791 but doing it completely correct is insanely expensive,
27792792 and this works reasonably well.
27802793
2794+ <h4 id='intrinsic-item-contributions'>
2795+ Flex Item Intrinsic Size Contributions</h4>
2796+
27812797 The <strong> main-size <a lt="min-content contribution">min-content</a> /<a>max-content contribution</a> of a <a>flex item</a> </strong>
2782- is its outer <a lt="min-content size">min-content</a> /<a>max-content size</a> ,
2798+ is its <em> outer</em> <a lt="min-content size">min-content</a> /<a>max-content size</a> ,
27832799 clamped by its <a>flex base size</a> as a maximum (if it is not growable)
27842800 and/or as a minimum (if it is not shrinkable),
27852801 and then further clamped by its <a lt="min main size property">min</a> /<a>max main size properties</a> .
27862802
2787- See [[!CSS3-SIZING]] for a definition of the terms in this section.
2788-
27892803<!--
27902804████████ ████████ ███ ██████ ██ ██ ████████ ██ ██ ████████ ████ ██ ██ ██████
27912805██ ██ ██ ██ ██ ██ ██ ███ ███ ██ ███ ██ ██ ██ ███ ██ ██ ██
0 commit comments