- 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
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