Skip to content

Commit 60dc925

Browse files
tabatkinstabatkins
committed
[css-flexbox] Attempting a more accurate max-content size for flex containers, by inverting the constraints implied by flex-grow/shrink.
1 parent 4360adf commit 60dc925

2 files changed

Lines changed: 89 additions & 35 deletions

File tree

‎css-flexbox/Overview.bs‎

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2858,26 +2858,53 @@ Definite and Indefinite Sizes</h3>
28582858
<h3 id='intrinsic-sizes'>
28592859
Intrinsic Sizes</h3>
28602860

2861-
<p>
2862-
The <dfn>max-content main size</dfn> of a <i>flex container</i>
2863-
is the sum of the flex container's items' <i>max-content contributions</i> in the <i>main axis</i>.
2864-
The <dfn>min-content main size</dfn> of a <i>single-line</i> flex container
2865-
is the sum of the flex container's items' <i>min-content contributions</i> in the <i>main axis</i>;
2866-
for a <i>multi-line</i> container,
2867-
it is the largest of those contributions.
2861+
The <dfn>max-content main size</dfn> of a <a>flex container</a>
2862+
is the smallest size the <a>flex container</a> can take
2863+
while maintaining the <a>max-content contributions</a> of its <a>flex items</a>.
28682864

2869-
<p>
2870-
The <dfn>min-content cross size</dfn> and <dfn>max-content cross size</dfn> of a flex container
2871-
are the cross size of the flex container
2872-
after performing layout into the given available <i>main-axis</i> space and infinite available <i>cross-axis</i> space.
2865+
<ol>
2866+
<li>
2867+
For each <a>flex item</a>,
2868+
subtract its <a>flex basis</a> from its <a>max-content contribution</a> size,
2869+
then divide by its <a>flex grow factor</a>, floored at 1,
2870+
or by its <a>scaled flex factor</a> (if the result was negative, flooring the <a>flex shrink factor</a> at 1 if necessary).
2871+
This is the item's <var>max-content flex fraction</var>.
28732872

2874-
<p>
2875-
The main-size <i title="min-content contribution">min-content</i>/<i>max-content contribution</i> of a <i>flex item</i>
2876-
is its outer <i>hypothetical main size</i>
2877-
when sized under a <i title="min-content constraint">min-content</i>/<i>max-content constraint</i> (respectively).
2873+
<li>
2874+
Place all <a>flex items</a> into lines of infinite length,
2875+
wrapping only as required by forced breaks.
28782876

2879-
<p>
2880-
See [[!CSS3-SIZING]] for a definition of the terms in this section.
2877+
<li>
2878+
Within each line,
2879+
find the largest <var>max-content flex fraction</var>
2880+
among all the <a>flex items</a>.
2881+
Add each item’s <a>flex basis</a>
2882+
to the product of its <a>flex grow factor</a>
2883+
(or <a>scaled flex factor</a>, if the chosen <var>max-content flex fraction</var> was negative)
2884+
and the chosen <var>max-content flex fraction</var>,
2885+
then clamp that result by the <a>max main size property</a>.
2886+
2887+
<li>
2888+
The <a>flex container</a>’s <a>max-content size</a> is the
2889+
largest sum of the afore-calculated sizes of all items within a single line.
2890+
</ol>
2891+
2892+
Issue: Is this correct?
2893+
2894+
The <dfn>min-content main size</dfn> of a <i>single-line</i> flex container
2895+
is the sum of the flex container's items' <i>min-content contributions</i> in the <i>main axis</i>;
2896+
for a <i>multi-line</i> container,
2897+
it is the largest of those contributions.
2898+
2899+
The <dfn>min-content cross size</dfn> and <dfn>max-content cross size</dfn> of a flex container
2900+
are the cross size of the flex container
2901+
after performing layout into the given available <i>main-axis</i> space and infinite available <i>cross-axis</i> space.
2902+
2903+
The main-size <i title="min-content contribution">min-content</i>/<i>max-content contribution</i> of a <i>flex item</i>
2904+
is its outer <i>hypothetical main size</i>
2905+
when sized under a <i title="min-content constraint">min-content</i>/<i>max-content constraint</i> (respectively).
2906+
2907+
See [[!CSS3-SIZING]] for a definition of the terms in this section.
28812908

28822909
<!--
28832910
████████ ████████ ███ ██████ ██ ██ ████████ ██ ██ ████████ ████ ██ ██ ██████

‎css-flexbox/Overview.html‎

Lines changed: 45 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2765,26 +2765,53 @@ <h3 class="heading settled" data-level=9.8 id=definite-sizes><span class=secno>9
27652765
<h3 class="heading settled" data-level=9.9 id=intrinsic-sizes><span class=secno>9.9 </span><span class=content>
27662766
Intrinsic Sizes</span><a class=self-link href=#intrinsic-sizes></a></h3>
27672767

2768-
<p>
2769-
The <dfn data-dfn-type=dfn data-noexport="" id=max-content-main-size>max-content main size<a class=self-link href=#max-content-main-size></a></dfn> of a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>
2770-
is the sum of the flex container’s items' <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-contribution title="max-content contributions">max-content contributions</a> in the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a>.
2771-
The <dfn data-dfn-type=dfn data-noexport="" id=min-content-main-size>min-content main size<a class=self-link href=#min-content-main-size></a></dfn> of a <a data-link-type=dfn href=#single-line title=single-line>single-line</a> flex container
2772-
is the sum of the flex container’s items' <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-contribution title="min-content contributions">min-content contributions</a> in the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a>;
2773-
for a <a data-link-type=dfn href=#multi-line title=multi-line>multi-line</a> container,
2774-
it is the largest of those contributions.
2768+
<p>The <dfn data-dfn-type=dfn data-noexport="" id=max-content-main-size>max-content main size<a class=self-link href=#max-content-main-size></a></dfn> of a <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>
2769+
is the smallest size the <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> can take
2770+
while maintaining the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-contribution title="max-content contributions">max-content contributions</a> of its <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>.</p>
27752771

2776-
<p>
2777-
The <dfn data-dfn-type=dfn data-noexport="" id=min-content-cross-size>min-content cross size<a class=self-link href=#min-content-cross-size></a></dfn> and <dfn data-dfn-type=dfn data-noexport="" id=max-content-cross-size>max-content cross size<a class=self-link href=#max-content-cross-size></a></dfn> of a flex container
2778-
are the cross size of the flex container
2779-
after performing layout into the given available <a data-link-type=dfn href=#main-axis title=main-axis>main-axis</a> space and infinite available <a data-link-type=dfn href=#cross-axis title=cross-axis>cross-axis</a> space.
2772+
<ol>
2773+
<li>
2774+
For each <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>,
2775+
subtract its <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a> from its <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-contribution title="max-content contribution">max-content contribution</a> size,
2776+
then divide by its <a data-link-type=dfn href=#flex-grow-factor title="flex grow factor">flex grow factor</a>, floored at 1,
2777+
or by its <a data-link-type=dfn href=#scaled-flex-factor title="scaled flex factor">scaled flex factor</a> (if the result was negative, flooring the <a data-link-type=dfn href=#flex-shrink-factor title="flex shrink factor">flex shrink factor</a> at 1 if necessary).
2778+
This is the item’s <var>max-content flex fraction</var>.
27802779

2781-
<p>
2782-
The main-size <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-contribution title="min-content contribution">min-content</a>/<a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-contribution title="max-content contribution">max-content contribution</a> of a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
2783-
is its outer <a data-link-type=dfn href=#hypothetical-main-size title="hypothetical main size">hypothetical main size</a>
2784-
when sized under a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-constraint title="min-content constraint">min-content</a>/<a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-constraint title="max-content constraint">max-content constraint</a> (respectively).
2780+
<li>
2781+
Place all <a data-link-type=dfn href=#flex-item title="flex items">flex items</a> into lines of infinite length,
2782+
wrapping only as required by forced breaks.
27852783

2786-
<p>
2787-
See <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-sizing title=biblio-CSS3-SIZING>[CSS3-SIZING]</a> for a definition of the terms in this section.
2784+
<li>
2785+
Within each line,
2786+
find the largest <var>max-content flex fraction</var>
2787+
among all the <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>.
2788+
Add each item’s <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a>
2789+
to the product of its <a data-link-type=dfn href=#flex-grow-factor title="flex grow factor">flex grow factor</a>
2790+
(or <a data-link-type=dfn href=#scaled-flex-factor title="scaled flex factor">scaled flex factor</a>, if the chosen <var>max-content flex fraction</var> was negative)
2791+
and the chosen <var>max-content flex fraction</var>,
2792+
then clamp that result by the <a data-link-type=dfn href=#main-size-property title="max main size property">max main size property</a>.
2793+
2794+
<li>
2795+
The <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>’s <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-inline-size title="max-content size">max-content size</a> is the
2796+
largest sum of the afore-calculated sizes of all items within a single line.
2797+
</ol>
2798+
2799+
<p class=issue id=issue-e0df87a5><a class=self-link href=#issue-e0df87a5></a>Is this correct?</p>
2800+
2801+
<p>The <dfn data-dfn-type=dfn data-noexport="" id=min-content-main-size>min-content main size<a class=self-link href=#min-content-main-size></a></dfn> of a <a data-link-type=dfn href=#single-line title=single-line>single-line</a> flex container
2802+
is the sum of the flex container’s items' <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-contribution title="min-content contributions">min-content contributions</a> in the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a>;
2803+
for a <a data-link-type=dfn href=#multi-line title=multi-line>multi-line</a> container,
2804+
it is the largest of those contributions.</p>
2805+
2806+
<p>The <dfn data-dfn-type=dfn data-noexport="" id=min-content-cross-size>min-content cross size<a class=self-link href=#min-content-cross-size></a></dfn> and <dfn data-dfn-type=dfn data-noexport="" id=max-content-cross-size>max-content cross size<a class=self-link href=#max-content-cross-size></a></dfn> of a flex container
2807+
are the cross size of the flex container
2808+
after performing layout into the given available <a data-link-type=dfn href=#main-axis title=main-axis>main-axis</a> space and infinite available <a data-link-type=dfn href=#cross-axis title=cross-axis>cross-axis</a> space.</p>
2809+
2810+
<p>The main-size <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-contribution title="min-content contribution">min-content</a>/<a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-contribution title="max-content contribution">max-content contribution</a> of a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
2811+
is its outer <a data-link-type=dfn href=#hypothetical-main-size title="hypothetical main size">hypothetical main size</a>
2812+
when sized under a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-constraint title="min-content constraint">min-content</a>/<a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-content-constraint title="max-content constraint">max-content constraint</a> (respectively).</p>
2813+
2814+
<p>See <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-sizing title=biblio-CSS3-SIZING>[CSS3-SIZING]</a> for a definition of the terms in this section.</p>
27882815

27892816

27902817

@@ -3870,4 +3897,4 @@ <h2 class="no-num no-ref heading settled" id=property-index><span class=content>
38703897
<h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue>When the Pseudo-Elements spec exists,
38713898
align this language with whatever algo we define for figuring out where to search for first-line/letter content.<a href=#issue-e8d79531> ↵ </a></div><div class=issue>This section is worded badly,
38723899
because 2.1 is incoherent about what "static position" really is.<a href=#issue-bb26f057> ↵ </a></div><div class=issue>This value was originally named "auto",
3873-
but that was confusing<a href=#issue-cdba524f> ↵ </a></div></div>
3900+
but that was confusing<a href=#issue-cdba524f> ↵ </a></div><div class=issue>Is this correct?<a href=#issue-e0df87a5> ↵ </a></div></div>

0 commit comments

Comments
 (0)