W3C home > Mailing lists > Public > public-css-archive@w3.org > September 2017

Re: [csswg-drafts] [css-flexbox][css-grid] Intrinsic sizing with ∑flex < 1 is broken

From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
Date: Mon, 11 Sep 2017 18:23:00 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-328615086-1505154170-sysbot+gh@w3.org>
Here's a well-formatted testcase showing off the behavior in Flexbox and Grid: <https://jsfiddle.net/Lbvz57zj/4/>

Chrome's behavior:
* Grid, sum < 1: double-applies the fractions. Each items' max-content size is 200px, so when the floated grid container is sizing itself, they report 40% (80px) and 50% (100px), so the grid ends up 180px wide. Then the columns are 40% and 50% of 180px, resulting in values *smaller* than originally requested.
* Grid, sum >= 1: correct behavior. The items report 50% (100px) and 100% (200px), so the grid ends up 300px wide. The columns then take 1/3 and 2/3 of that size (proper re-scaled shares), resulting in the exact sizes they requested earlier.
* Flexbox, either case: The items just report their max-content size (200px each), so the flexbox is 400px wide. The items then size correctly within that size.

Firefox's behavior:
* Everything: acts the same as Chrome/Flexbox; the container is 400px wide, the items size correctly within that size.


Ideal behavior for both Grid and Flexbox:
* Sum < 1: Items report 40% (80px) and 50% (100px). The sum is < 1, so this sum gets rescaled to `180px / .9 = 200px`, and the container ends up 200px wide.  The items then claim 40% and 50% of that size, resulting in them being 80px and 100px.
* Sum > 1: Items report 50% (100px) and 100% (200px). The sum is > 1, so the container sizes itself to that exactly and ends up 300px wide. The items then claim 1/3 and 2/3 of that space, resulting in them being 100px and 200px.


@fantasai's tweak up above correctly fixes the problem for Grid. We need to review exactly if/how Flexbox is diverging from ideal, and figure out how to fix it.

GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1735#issuecomment-328615086 using your GitHub account
Received on Monday, 11 September 2017 18:22:54 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:17 UTC