Skip to content

Commit 2f0ad00

Browse files
tabatkinstabatkins
committed
[css-flexbox] Define that if a flex item has a definite flex basis, its definite (and equal to flexed size) for the purpose of resolving percentages.
1 parent 737f700 commit 2f0ad00

File tree

2 files changed

+81
-38
lines changed

2 files changed

+81
-38
lines changed

‎css-flexbox/Overview.bs

+39-14
Original file line numberDiff line numberDiff line change
@@ -2200,20 +2200,6 @@ Flex Layout Algorithm</h2>
22002200
Authors writing web pages should generally be served well by the individual property descriptions,
22012201
and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout.
22022202

2203-
For the purposes of these definitions,
2204-
a <dfn title="definite|definite size">definite size</dfn> is one that can be determined without measuring content,
2205-
i.e. is a <var>&lt;length></var>,
2206-
a size of the initial containing block,
2207-
or a <var>&lt;percentage></var> that is resolved against a definite size.
2208-
An <dfn title="indefinite|indefinite size">indefinite size</dfn> is one that is not <i>definite</i>.
2209-
2210-
2211-
As a special case for handling <a>stretched</a> <i>flex items</i>,
2212-
if a <i>single-line</i> <i>flex container</i> has a definite cross size,
2213-
the outer <i>cross size</i> of any <a>stretched</a> <i>flex items</i>
2214-
is the flex container's inner cross size (clamped to the <i>flex item</i>’s min and max <i>cross size</i>)
2215-
and is considered <i>definite</i>.
2216-
22172203
The following sections define the algorithm for laying out a flex container and its contents.
22182204

22192205
<h3 id='box-manip'>
@@ -2776,6 +2762,45 @@ Flex Factor Focused Algorithm (CR version)</h4>
27762762
Set each item’s used <a>main size</a> to its <a>target main size</a>.
27772763
</ol>
27782764

2765+
<!--
2766+
████████ ████████ ████████ ████ ██ ██ ████ ████████ ████████
2767+
██ ██ ██ ██ ██ ███ ██ ██ ██ ██
2768+
██ ██ ██ ██ ██ ████ ██ ██ ██ ██
2769+
██ ██ ██████ ██████ ██ ██ ██ ██ ██ ██ ██████
2770+
██ ██ ██ ██ ██ ██ ████ ██ ██ ██
2771+
██ ██ ██ ██ ██ ██ ███ ██ ██ ██
2772+
████████ ████████ ██ ████ ██ ██ ████ ██ ████████
2773+
-->
2774+
2775+
<h3 id='definite-sizes'>
2776+
Definite and Indefinite Sizes</h3>
2777+
2778+
For the purposes of these definitions,
2779+
a <dfn title="definite|definite size">definite size</dfn> is one that can be determined without measuring content,
2780+
i.e. is a <<length>>,
2781+
a size of the initial containing block,
2782+
or a <<percentage>> that is resolved against a definite size.
2783+
An <dfn title="indefinite|indefinite size">indefinite size</dfn> is one that is not <a>definite</a>.
2784+
2785+
Flexbox has several additional cases where a length can be considered <a>definite</a>:
2786+
2787+
<ol>
2788+
<li>
2789+
If a <a>single-line</a> <a>flex container</a> has a definite cross size,
2790+
the outer <a>cross size</a> of any <a>stretched</a> <a>flex items</a>
2791+
is the flex container's inner cross size (clamped to the <a>flex item</a>’s min and max <a>cross size</a>)
2792+
and is considered <a>definite</a>.
2793+
2794+
<li>
2795+
If a percentage is going to be resolved against a <a>flex item’s</a> <a>main size</a>,
2796+
and the <a>flex item</a> has a <a>definite</a> <a>flex basis</a>,
2797+
the <a>main size</a> must be treated as <a>definite</a>
2798+
for the purpose of resolving the percentage,
2799+
and the percentage must resolve against the <strong>flexed</strong> <a>main size</a> of the <a>flex item</a>
2800+
(that is, after the layout algorithm below has been completed for the <a>flex item’s</a> <a>flex container</a>,
2801+
and the <a>flex item</a> has acquired its final size).
2802+
</ol>
2803+
27792804
<!--
27802805
████ ██ ██ ████████ ████████ ██████ ████ ████████ ████████ ██████
27812806
██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

‎css-flexbox/Overview.html

+42-24
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,8 @@ <h2 class="no-num no-toc no-ref heading settled" id=contents><span class=content
377377
<ul class=toc>
378378
<li><a href=#resolve-flexible-lengths-desired-free-space><span class=secno>9.7.1</span> Free Space Focused Algorithm (LC version)</a>
379379
<li><a href=#resolve-flexible-lengths-flex-factors><span class=secno>9.7.2</span> Flex Factor Focused Algorithm (CR version)</a></ul>
380-
<li><a href=#intrinsic-sizes><span class=secno>9.8</span> Intrinsic Sizes</a></ul>
380+
<li><a href=#definite-sizes><span class=secno>9.8</span> Definite and Indefinite Sizes</a>
381+
<li><a href=#intrinsic-sizes><span class=secno>9.9</span> Intrinsic Sizes</a></ul>
381382
<li><a href=#pagination><span class=secno>10</span> Fragmenting Flex Layout</a>
382383
<ul class=toc>
383384
<li><a href=#pagination-algo><span class=secno>10.1</span> Sample Flex Fragmentation Algorithm</a></ul>
@@ -2126,20 +2127,6 @@ <h2 class="heading settled" data-level=9 id=layout-algorithm><span class=secno>9
21262127
Authors writing web pages should generally be served well by the individual property descriptions,
21272128
and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout.</p>
21282129

2129-
<p>For the purposes of these definitions,
2130-
a <dfn data-dfn-type=dfn data-noexport="" id=definite title="definite|definite size">definite size<a class=self-link href=#definite></a></dfn> is one that can be determined without measuring content,
2131-
i.e. is a <var>&lt;length&gt;</var>,
2132-
a size of the initial containing block,
2133-
or a <var>&lt;percentage&gt;</var> that is resolved against a definite size.
2134-
An <dfn data-dfn-type=dfn data-noexport="" id=indefinite title="indefinite|indefinite size">indefinite size<a class=self-link href=#indefinite></a></dfn> is one that is not <a data-link-type=dfn href=#definite title=definite>definite</a>.</p>
2135-
2136-
2137-
<p>As a special case for handling <a data-link-type=dfn href=#stretched title=stretched>stretched</a> <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>,
2138-
if a <a data-link-type=dfn href=#single-line title=single-line>single-line</a> <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> has a definite cross size,
2139-
the outer <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> of any <a data-link-type=dfn href=#stretched title=stretched>stretched</a> <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>
2140-
is the flex container’s inner cross size (clamped to the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s min and max <a data-link-type=dfn href=#cross-size title="cross size">cross size</a>)
2141-
and is considered <a data-link-type=dfn href=#definite title=definite>definite</a>.</p>
2142-
21432130
<p>The following sections define the algorithm for laying out a flex container and its contents.</p>
21442131

21452132
<h3 class="heading settled" data-level=9.1 id=box-manip><span class=secno>9.1 </span><span class=content>
@@ -2700,7 +2687,38 @@ <h4 class="heading settled" data-level=9.7.2 id=resolve-flexible-lengths-flex-fa
27002687

27012688

27022689

2703-
<h3 class="heading settled" data-level=9.8 id=intrinsic-sizes><span class=secno>9.8 </span><span class=content>
2690+
<h3 class="heading settled" data-level=9.8 id=definite-sizes><span class=secno>9.8 </span><span class=content>
2691+
Definite and Indefinite Sizes</span><a class=self-link href=#definite-sizes></a></h3>
2692+
2693+
<p>For the purposes of these definitions,
2694+
a <dfn data-dfn-type=dfn data-noexport="" id=definite title="definite|definite size">definite size<a class=self-link href=#definite></a></dfn> is one that can be determined without measuring content,
2695+
i.e. is a <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a>,
2696+
a size of the initial containing block,
2697+
or a <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#percentage-value title="<percentage>">&lt;percentage&gt;</a> that is resolved against a definite size.
2698+
An <dfn data-dfn-type=dfn data-noexport="" id=indefinite title="indefinite|indefinite size">indefinite size<a class=self-link href=#indefinite></a></dfn> is one that is not <a data-link-type=dfn href=#definite title=definite>definite</a>.</p>
2699+
2700+
<p>Flexbox has several additional cases where a length can be considered <a data-link-type=dfn href=#definite title=definite>definite</a>:</p>
2701+
2702+
<ol>
2703+
<li>
2704+
If a <a data-link-type=dfn href=#single-line title=single-line>single-line</a> <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> has a definite cross size,
2705+
the outer <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> of any <a data-link-type=dfn href=#stretched title=stretched>stretched</a> <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>
2706+
is the flex container’s inner cross size (clamped to the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s min and max <a data-link-type=dfn href=#cross-size title="cross size">cross size</a>)
2707+
and is considered <a data-link-type=dfn href=#definite title=definite>definite</a>.
2708+
2709+
<li>
2710+
If a percentage is going to be resolved against a <a data-link-type=dfn href=#flex-item title="flex item’s">flex item’s</a> <a data-link-type=dfn href=#main-size title="main size">main size</a>,
2711+
and the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> has a <a data-link-type=dfn href=#definite title=definite>definite</a> <a data-link-type=dfn href=#flex-basis title="flex basis">flex basis</a>,
2712+
the <a data-link-type=dfn href=#main-size title="main size">main size</a> must be treated as <a data-link-type=dfn href=#definite title=definite>definite</a>
2713+
for the purpose of resolving the percentage,
2714+
and the percentage must resolve against the <strong>flexed</strong> <a data-link-type=dfn href=#main-size title="main size">main size</a> of the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
2715+
(that is, after the layout algorithm below has been completed for the <a data-link-type=dfn href=#flex-item title="flex item’s">flex item’s</a> <a data-link-type=dfn href=#flex-container title="flex container">flex container</a>,
2716+
and the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> has acquired its final size).
2717+
</ol>
2718+
2719+
2720+
2721+
<h3 class="heading settled" data-level=9.9 id=intrinsic-sizes><span class=secno>9.9 </span><span class=content>
27042722
Intrinsic Sizes</span><a class=self-link href=#intrinsic-sizes></a></h3>
27052723

27062724
<p>
@@ -3701,8 +3719,8 @@ <h2 class="no-num no-ref heading settled" id=index><span class=content>
37013719
<li>cross size, <a href=#cross-size title="section 2">2</a>
37023720
<li>cross size property, <a href=#cross-size-property title="section 2">2</a>
37033721
<li>cross-start, <a href=#cross-start title="section 2">2</a>
3704-
<li>definite, <a href=#definite title="section 9">9</a>
3705-
<li>definite size, <a href=#definite title="section 9">9</a>
3722+
<li>definite, <a href=#definite title="section 9.8">9.8</a>
3723+
<li>definite size, <a href=#definite title="section 9.8">9.8</a>
37063724
<li>desired free space, <a href=#desired-free-space title="section 9.7.1">9.7.1</a>
37073725
<li>flex<ul><li>value for display, <a href=#valdef-display-flex title="section 3">3</a>
37083726
<li>(property), <a href=#propdef-flex title="section 7.1">7.1</a>
@@ -3735,8 +3753,8 @@ <h2 class="no-num no-ref heading settled" id=index><span class=content>
37353753
<li>free space, <a href=#free-space title="section 9.7.1">9.7.1</a>
37363754
<li>hypothetical cross size, <a href=#hypothetical-cross-size title="section 9.4">9.4</a>
37373755
<li>hypothetical main size, <a href=#hypothetical-main-size title="section 9.2">9.2</a>
3738-
<li>indefinite, <a href=#indefinite title="section 9">9</a>
3739-
<li>indefinite size, <a href=#indefinite title="section 9">9</a>
3756+
<li>indefinite, <a href=#indefinite title="section 9.8">9.8</a>
3757+
<li>indefinite size, <a href=#indefinite title="section 9.8">9.8</a>
37403758
<li>initial free space, <a href=#initial-free-space title="section 9.7.2">9.7.2</a>
37413759
<li>inline-flex, <a href=#valdef-display-inline-flex title="section 3">3</a>
37423760
<li>&lt;integer&gt;, <a href=#valdef-order-integer title="section 5.4">5.4</a>
@@ -3750,10 +3768,10 @@ <h2 class="no-num no-ref heading settled" id=index><span class=content>
37503768
<li>main size, <a href=#main-size title="section 2">2</a>
37513769
<li>main size property, <a href=#main-size-property title="section 2">2</a>
37523770
<li>main-start, <a href=#main-start title="section 2">2</a>
3753-
<li>max-content cross size, <a href=#max-content-cross-size title="section 9.8">9.8</a>
3754-
<li>max-content main size, <a href=#max-content-main-size title="section 9.8">9.8</a>
3755-
<li>min-content cross size, <a href=#min-content-cross-size title="section 9.8">9.8</a>
3756-
<li>min-content main size, <a href=#min-content-main-size title="section 9.8">9.8</a>
3771+
<li>max-content cross size, <a href=#max-content-cross-size title="section 9.9">9.9</a>
3772+
<li>max-content main size, <a href=#max-content-main-size title="section 9.9">9.9</a>
3773+
<li>min-content cross size, <a href=#min-content-cross-size title="section 9.9">9.9</a>
3774+
<li>min-content main size, <a href=#min-content-main-size title="section 9.9">9.9</a>
37573775
<li>multi-line, <a href=#multi-line title="section 6">6</a>
37583776
<li>none, <a href=#valdef-flex-none title="section 7.1">7.1</a>
37593777
<li>normalized free space, <a href=#normalized-free-space title="section 9.7.1">9.7.1</a>

0 commit comments

Comments
 (0)