- From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
- Date: Mon, 11 Sep 2017 19:18:12 +0000
- To: public-css-archive@w3.org
Okay, so example problem showing off non-zero base sizes: Two flex items, both have a max-content size of 200px, both have `flex: .4`. First item has `flex-basis: 100px`, second has `flex-basis: 300px`. Ideal outcome: First item wants to grow, second wants to shrink, so per standard flex rules, we're growing. It wants to get 40% of the way toward its ideal (max-content) width, so should land at 140px. Second item wants to grow the same amount, so it should land at 340px. Algo walkthrough: 1. First item's max-content flex fraction is `(200px - 100px) / max(.4, 1)`, or 100px. Second item's max-content flex fraction is `(200px - 300px) / max(1, 1)`, or -100px. 2. Both items are on the same line. 3. Largest mcff is 100px, so we use that. Sum of flex grow factors (since it's positive) is .8, so we rescale each item's flex grow factors to sum to 1 - they both become .5. 4. First item becomes `100px + (100px * .5) = 150px`. Second item becomes `300px + (100px * .5) = 350px`. No additional clamping for this example. 5. Flex container is thus `150px + 350px = 500px` wide. Then we actually run flex layout inside that flex container. Container is 500px wide, sum of base sizes is 400px, free space is 100px. Items thus grow. Both have a flex-grow factor of .4, so they each get 40px of space added to their base size, resulting in 140px and 340px. Success! -- GitHub Notification of comment by tabatkins Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1735#issuecomment-328631076 using your GitHub account
Received on Monday, 11 September 2017 19:18:06 UTC