@@ -1007,70 +1007,16 @@ Implied Minimum Size of Grid Items</h3>
10071007
10081008 On a <a>grid item</a> whose 'overflow' is ''overflow/visible'' ,
10091009 when ''min-width/auto'' is specified on the <a>grid item</a> ,
1010- the following table gives the minimum size in that dimension:
1011-
1012- <table class=data>
1013- <colgroup span=2></colgroup>
1014- <colgroup span=1></colgroup>
1015- <thead>
1016- <tr>
1017- <th> Specified Size
1018- <th> Transferred Size
1019- <th> Minimum Size
1020- <tbody>
1021- <tr>
1022- <td>
1023- <td>
1024- <td><var> content size</var>
1025- <tr>
1026- <td> ✓
1027- <td>
1028- <td> min(<var> specified size</var> , <var> content size</var> )
1029- <tr>
1030- <td>
1031- <td> ✓
1032- <td> min(<var> transferred size</var> , <var> content size</var> )
1033- <tr>
1034- <td> ✓
1035- <td> ✓
1036- <td> min(<var> specified size</var> , <var> content size</var> )
1037- </table>
1038-
1039- Where:
1040-
1041- <dl>
1042- <dt><var> specified size</var>
1043- <dd>
1044- If the item’s computed width/height is <a>definite</a> ,
1045- then the <var> specified size</var> is that size
1046- (clamped by its <a>max size property</a> in that dimension if it's <a>definite</a> ).
1047- It is otherwise undefined.
1048-
1049- <dt><var> transferred size</var>
1050- <dd>
1051- If the item has an intrinsic aspect ratio
1052- and its computed height/width is <a>definite</a> ,
1053- then the <var> transferred size</var> is that size
1054- (clamped by its <a lt="min size property">min and max size properties</a> in that dimension if they are <a>definite</a> ),
1055- converted through the aspect ratio.
1056- It is otherwise undefined.
1057-
1058- <dt><var> content size</var>
1059- <dd>
1060- The <var> content size</var> is the <a>min-content size</a> in that dimension,
1061- clamped, if it has an aspect ratio, by any <a>definite</a> <a lt="min size property">min and max size properties</a>
1062- in the perpendicular dimension
1063- converted through the aspect ratio,
1064- and then further clamped by the <a>max size property</a> in the relevant dimension if that is <a>definite</a> .
1065- </dl>
1066-
1067-
1010+ it specifies an <a>automatic minimum size</a>
1011+ (just as for <a>flex items</a> ).
1012+ [[!CSS-FLEXBOX-1]]
1013+
10681014 <div class="note" id="min-size-opt">
10691015 Note that while a content-based minimum size is often appropriate,
10701016 and helps prevent content from overlapping or spilling outside its container,
10711017 in some cases it is not:
10721018
1073- In particular, if flex sizing is being used for a major content area of a document,
1019+ In particular, if grid layout is being used for a major content area of a document,
10741020 it is better to set an explicit font-relative minimum width such as ''min-width: 12em'' .
10751021 A content-based minimum width could result in a large table or large image
10761022 stretching the size of the entire content area into an overflow zone,
@@ -1083,17 +1029,6 @@ Implied Minimum Size of Grid Items</h3>
10831029 this traversal is trivial and therefore not a performance concern.)
10841030 </div>
10851031
1086- For the purpose of calculating an intrinsic size of the element
1087- (e.g. the element's <a>min-content size</a> ),
1088- this value causes the element's width/height to become indefinite
1089- (even if e.g. its 'width' property specifies a <a>definite</a> size).
1090- Note this means that percentages calculated against this size
1091- will be treated as ''height/auto'' .
1092- Otherwise, although this may require an additional layout pass to re-resolve percentages in some cases,
1093- this value
1094- (like the ''min-content'' , ''max-content'' , and ''width/fit-content'' values defined in [[CSS3-SIZING]] )
1095- does not prevent the resolution of percentage sizes within the item.
1096-
10971032<!--
10981033████████ ██ ██ ████████ ██ ████ ██████ ████ ████████
10991034██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
0 commit comments