You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css3-flexbox/Overview.src.html
+16-15Lines changed: 16 additions & 15 deletions
Original file line number
Diff line number
Diff line change
@@ -957,21 +957,22 @@ <h2 id='layout-algorithm'>
957
957
<li>If item has a definite preferred size, it is the hypothetical main size. </li>
958
958
959
959
<li>
960
-
<p>Otherwise layout the flexbox items using the shrink-to-fit algorithm.</p>
961
-
962
-
<p>Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. This module doesn't define the exact algorithm, but it is expected that the shrink-to-fit size is calculated the same way as it is for floats, except in this case it is not affected by available space.</p>
963
-
964
-
<divclass="issue"><p>TODO: define shrink-to-fit. It works
965
-
differently in row/column flexboxes:</p>
966
-
<ul>
967
-
<li>In horizontal, STF is max-content. </li>
968
-
<li>In vertical, cross-axis
969
-
alignment has to happen first, then main-axis STF size can
970
-
be calculated. In multi-line vertical (tricky case), auto
971
-
sizes on cross axis are resolved as if it was
972
-
single-line.</li>
973
-
</ul>
974
-
</div>
960
+
<p>Otherwise layout the flexbox items using the
961
+
shrink-to-fit algorithm:</p>
962
+
<ol>
963
+
<li>
964
+
<p>In row-direction flexbox, shrink-to-fit size of a flex item along the main axis is its 'max-content', as defined in [[!CSS3-WRITING-MODES]]</p>
965
+
<li>
966
+
<p>In column-direction flexbox, shrink-to-fit size of a flex item along the main axis
967
+
is the extent in block direction that it gets when laid
968
+
out using its 'fit-content' as its size in inline
969
+
direction, using cross-size of flexbox content box as
970
+
available measure, also as defined in
971
+
[[!CSS3-WRITING-MODES]]. </p>
972
+
<p>In multi-line column-direction flexbox, cross-size of the whole flexbox content box is used as available measure, not the share of individual flexbox line, to avoid a circular dependency of line breaks on shrink-to-fit calculations.</p>
0 commit comments