Skip to content

Commit

Permalink
[css-flexbox][css-grid] Fix calculation of intrinsic sizes of grid/fl…
Browse files Browse the repository at this point in the history
…ex containers when tracks/items flex factors sum to less than one. #1735
  • Loading branch information
fantasai committed Sep 13, 2017
1 parent 5de1675 commit 5c66e72
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 11 deletions.
13 changes: 11 additions & 2 deletions css-flexbox/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -2809,9 +2809,18 @@ Flex Container Intrinsic Main Sizes</h4>
Within each line,
find the largest <var>max-content flex fraction</var>
among all the <a>flex items</a>.
If the sum of the <a>flex grow factors</a>
(<a>flex shrink factors</a>,
if the largest <var>max-content flex fraction</var> was negative)
on that line is less than one,
divide each <a>flex grow factor</a> (<a>flex shrink factor</a>)
by that sum to rescale their total to one.

<li>
Add each item’s <a>flex base size</a>
to the product of its <a>flex grow factor</a>
(or <a>scaled flex shrink factor</a>, if the chosen <var>max-content flex fraction</var> was negative)
to the product of its <em>rescaled</em> <a>flex grow factor</a>
(or <em>rescaled</em> <a>scaled flex shrink factor</a>,
if the chosen <var>max-content flex fraction</var> was negative)
and the chosen <var>max-content flex fraction</var>,
then clamp that result by the <a>max main size property</a>
floored by the <a>min main size property</a>.
Expand Down
14 changes: 12 additions & 2 deletions css-flexbox/issues-cr-20160526.bsi
Original file line number Diff line number Diff line change
Expand Up @@ -392,8 +392,10 @@ Issue 42.
Summary: Intrinsic sizing with ∑flex < 1 is broken
From: fantasai
Comment: https://github.com/w3c/csswg-drafts/issues/1735
Open: =WG= Resolve.
Response: https://github.com/w3c/csswg-drafts/issues/1735#issuecomment-329218845
Open: Accepted
Resolved: Bugfix
Verified: =dholbert= Review.
----
Issue 43.
Summary: Rename “Implied Minimum Size” section to “Automatic Minimum Size”
Expand All @@ -408,5 +410,13 @@ Summary: Confusion over content size vs transferred size of images.
From: AmeliaBR
Comment: https://github.com/w3c/csswg-drafts/issues/694
Response: https://github.com/w3c/csswg-drafts/issues/694#issuecomment-315920507
Closed: OutOfScope, refiled as https://github.com/w3c/csswg-drafts/issues/1609
Closed: OutOfScope
Note: Refiled as https://github.com/w3c/csswg-drafts/issues/1609
----
Issue 45.
Summary: Clarify sentence construction in finding max-content flex fraction
From: Alan Stearns
Comment: https://github.com/w3c/csswg-drafts/issues/1803
Response: https://github.com/w3c/csswg-drafts/issues/1803#issuecomment-329247658
Closed: Editorial
----
37 changes: 30 additions & 7 deletions css-grid/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -905,15 +905,16 @@ Sizing Grid Containers</h3>
<span class="note">The block layout spec should probably define this,
but it isn't written yet.</span>

The <a>max-content size</a> of a <a>grid container</a> is
The <a>max-content size</a> (<a>min-content size</a>) of a <a>grid container</a> is
the sum of the <a>grid container’s</a> track sizes (including gutters)
in the appropriate axis,
when the grid is sized under a <a>max-content constraint</a>.

The <a>min-content size</a> of a <a>grid container</a> is
the sum of the <a>grid container’s</a> track sizes (including gutters)
in the appropriate axis,
when the grid is sized under a <a>min-content constraint</a>.
when the grid is sized under a <a>max-content constraint</a> (<a>min-content constraint</a>).
However, if the sum of the <a>flex factors</a> of the <a>flexible tracks</a>
is less than one,
then instead calculate the flexible tracks’ sizes
using <em>rescaled</em> flex factors--
each track’s <a>flex factor</a> divided by the sum of all the tracks’ flex factors</a>--
in place of their actual flex factors.


<!--
Expand Down Expand Up @@ -1692,6 +1693,9 @@ Flexible Lengths: the ''fr'' unit</h4>
A <dfn export>flexible length</dfn> or <dfn><<flex>></dfn> is a dimension
with the <dfn value for="<flex>" lt="fr|fr unit">fr</dfn> unit,
which represents a fraction of the <a>leftover space</a> in the <a>grid container</a>.
Tracks sized with ''fr'' units are called <dfn>flexible tracks</dfn>
as they flex in response to <a>leftover space</a>
similar to how <a>flex items</a> fill space in a <a>flex container</a>.

Note: <<flex>> values are not <<length>>s
(nor are they compatible with <<length>>s, like some <<percentage>> values),
Expand Down Expand Up @@ -4254,6 +4258,25 @@ Major Changes</h4>
Significant Adjustments and Fixes</h4>

<ul>
<li id="change-2016-flex-max-content">
Corrected max-content contributions of flexible tracks
to handle cases where the sum of the flex factors is less than one.
(<a href="https://github.com/w3c/csswg-drafts/issues/1735">Issue 1735</a>)
<blockquote>
<p>
The <a>max-content size</a> (<a>min-content size</a>) of a <a>grid container</a> is
the sum of the <a>grid container’s</a> track sizes (including gutters)
in the appropriate axis,
when the grid is sized under a <a>max-content constraint</a> (<a>min-content constraint</a>).
<ins>However, if the sum of the <a>flex factors</a> of the <a>flexible tracks</a>
is less than one,
then instead calculate the flexible tracks’ sizes
using <em>rescaled</em> flex factors--
each track’s <a>flex factor</a> divided by the sum of all the tracks’ flex factors</a>--
in place of their actual flex factors.</ins>
</p>
</blockquote>

<li id="change-2016-flex-clamping-indefinite">
Applied flex factor clamping to 1 also to indefinite case
(<a href="https://drafts.csswg.org/css-grid-1/issues-cr-2016#issue-26">Issue 26</a>,
Expand Down

0 comments on commit 5c66e72

Please sign in to comment.