Skip to content

Commit 3e507e4

Browse files
committed
[css-grid] Sync implied minimum size to Flexbox definition
1 parent ec4ebc3 commit 3e507e4

File tree

1 file changed

+5
-70
lines changed

1 file changed

+5
-70
lines changed

css-grid/Overview.bs

Lines changed: 5 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)