- From: fantasai via GitHub <sysbot+gh@w3.org>
- Date: Fri, 01 Jul 2022 22:58:10 +0000
- To: public-css-archive@w3.org
So @tabatkins and I worked out some edits for this issue. We tweaked the growth algorithm a bit to make the continuity curve less extreme (by the time we do layout, we've triple-applied the flex factor without the fix) by dividing the chosen flex fraction by the sum of the growth factors when that sum is < 1.
**Principles**
1. Don't explode any sizes, whether growing or shrinking, as inputs approach zero.
2. When flex factors are all >=1, return the minimum size necessary for every item to be >= max-content size.
3. Items with a zero flex shouldn't affect the sizes at all.
4. Keep it continuous over variance of flex factors and item sizes.
5. Keep sizing variance as linear as possible with respect to linear changes to any input variable (size, flex factor).
6. When the sum of flex factors is >=1, return the minimum size necessary for every item to be >= max-content size.
Principle 6, which is a superset of 2, was what we sacrified in order to make the rest work.
**Sample Cases**
(based on your Apr 19 testcase but with varying flex-grow values)
<table>
<tr><th>Flex<td>Calculation<td>Final Sizes</td>
<tr><td>0|0 <td> no growth<td>200|100
<tr><td>0|.1 <td> 0|10 → chosen 10, reversed to 100 → size is (200+0)+(100+.1*100) = 310px <td> 200|101
<tr><td>.1|.1 <td> 30|10 → chosen 30, reversed to 150 → size is (200+.1*150) + (100+.1*150) = 330px <td> 203|103
<tr><td>.4|.4 <td> 120|40 → chosen 120, reversed to 150 → size is (200+.4*150) + (100+.4*150) = 420 <td> 248|148
<tr><td>.5|.5 <td> 150|50 → chosen 150 → size is (200+.5*150) + (100+.5*150) = 450 <td> 275|175
<tr><td>.75|.75 <td> 225|75 → chosen 225 → size is (200+.75*225) + (100+.75*225) = 368.75+268.75 = 637.5 <td> 368.75|268.75
<tr><td>1|1 <td> 300|100 → chosen 300 → size is (200+300) + (100+300) = 900 <td> 500|400
<tr><td>0|2 <td> 0|50 → chosen 50 → size is (200+0) + (100+2*50) = 400 <td> 200|200
<tr><td>.1|2 <td> 30|50 → chosen 50 → size is (200+.1*50) + (100+2*50) = 405 <td> 205|200
<tr><td>.2|2 <td> 60|50 → chosen 60 → size is (200+.2*60) + (100+2*60) = 432 <td> 212|220
<tr><td>2|2 <td> 150|50 → chosen 150 → size is (200+2*150) + (100+2*150) = 900 <td> 500|400
</table>
@davidsgrogan @dholbert Let us know if it looks good, or if you notice any other concerns!
--
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7189#issuecomment-1172771501 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 1 July 2022 22:58:12 UTC