Skip to content

Commit

Permalink
[css-flexbox-1] Per WG resolution, make min-content cross size of mul…
Browse files Browse the repository at this point in the history
…ti-line column flexboxes act like it's a single column. #6777
  • Loading branch information
tabatkins committed Oct 3, 2022
1 parent 518fa4c commit 5630e7b
Showing 1 changed file with 36 additions and 17 deletions.
53 changes: 36 additions & 17 deletions css-flexbox-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -3037,23 +3037,42 @@ Flex Container Intrinsic Cross Sizes</h4>
of its <a>flex items</a>.

For a <em><a>multi-line</a></em> <a>flex container</a>,
the <a>min-content</a>/<a>max-content</a> <a>cross size</a>
is the sum of the flex line cross sizes
resulting from sizing the flex container under a <a>cross-axis</a> <a>min-content constraint</a>/<a>max-content constraint</a> (respectively).
However, if the <a>flex container</a> is ''flex-flow: column wrap;'',
then it's sized by first finding the largest
<a lt="min-content contribution">min-content</a>/<a lt="min-content contribution">max-content</a>
<a>cross-size</a> contribution among the <a>flex items</a> (respectively),
then using that size as the <a>available space</a> in the <a>cross axis</a>
for each of the <a>flex items</a> during layout.

Note: This heuristic for ''column wrap'' <a>flex containers</a>
gives a reasonable approximation of the size that the <a>flex container</a> should be,
with each flex item ending up as min(<var>item’s own max-content</var>, <var>maximum min-content among all items</var>),
and each <a>flex line</a> no larger than its largest <a>flex item</a>.
It's not a <em>perfect</em> fit in some cases,
but doing it completely correct is insanely expensive,
and this works reasonably well.
the behavior depends on whether it's a row or column flexbox:

: ''flex-direction/row'' [=multi-line=] [=flex container=] [=cross-size=]
:: The <a>min-content</a>/<a>max-content</a> <a>cross size</a>
is the sum of the flex line cross sizes
resulting from sizing the flex container
under a <a>cross-axis</a> <a>min-content constraint</a>/<a>max-content constraint</a> (respectively).

: ''flex-direction/column'' [=multi-line=] [=flex container=] [=cross-size=]
:: The [=min-content=] [=cross size=]
is the largest [=min-content contribution=] among all of its [=flex items=].

Note: This heuristic effectively assumes a single flex line,
in order to guarantee that the [=min-content size=]
is smaller than the [=max-content size=].
If the flex container has a height constraint,
this will result in overflow,
but if the [=flex container=] is also a [=scroll container=],
it will at least be large enough to fit
any given column entirely within its [=scrollport=].

The [=max-content=] [=cross size=] is the sum of the [=flex line=] [=cross sizes=]
resulting from sizing the [=flex container=]
under a <a>cross-axis</a> <a>max-content constraint</a>,
using the largest <a lt="max-content contribution">max-content</a> <a>cross-size</a> contribution among the <a>flex items</a>
as the <a>available space</a> in the <a>cross axis</a>
for each of the <a>flex items</a> during layout.

Note: This heuristic gives a reasonable approximation
of the size that the <a>flex container</a> should be,
with each [=flex item=] laid out at its [=max-content contribution=] or larger,
and each <a>flex line</a> no larger than its largest <a>flex item</a>.
It's not a <em>perfect</em> fit in some cases,
but doing it completely correct is insanely expensive,
and this works reasonably well.


<h4 id='intrinsic-item-contributions'>
Flex Item Intrinsic Size Contributions</h4>
Expand Down

0 comments on commit 5630e7b

Please sign in to comment.