Flex-shrink example summary - more precision in explanation

[OskarKaminski]

Description

Flex-shrink example summary - more precision in explanation

Motivation

After reading the section, it wasn't clear to me how it's calculated.
A reference for flex-grow explains it but it's not stated anywhere that flex-shrink uses the same mechanism.
Without clearly stating it, it may be counter-intuitive as a paragraph above mentions that those calculations are more complicated than for flex-grow.

Additional details

Related issues and pull requests

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/Reference/Properties/flex-shrink

Flaws (6)

URL: /en-US/docs/Web/CSS/Reference/Properties/flex-shrink
Title: flex-shrink
Flaw count: 6

• broken_links:
  • Link /en-US/docs/Web/CSS/number#interpolation is a redirect
  • Link /en-US/docs/Web/CSS/number is a redirect
• macros:
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_cascade/Inheritance which is a redirect
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_animated_properties which is a redirect

[chrisdavidmills]

Thanks for the update, @OskarKaminski. I agree with your meaning, but I'd like to see the grammar improved a bit, plus I think it makes sense to explain all the sums rather than just a couple. See my suggestion below.

[chrisdavidmills]

Suggested change

The flex items don't overflow their container because they are able to shrink: the `500px` of negative free space is distributed among the five items based on their `flex-shrink` values. Since a total of shrink values for the five items is `6.5`, width of items with `flex-shrink: 1` is reduced by `1/6.5 * 500px = 76.92px` and of item with `flex-shink: 2` by `2/6.5 * 500px = 153.85px`.

The flex items don't overflow their container because they can shrink: the `500px` of negative free space is distributed among the five items based on their `flex-shrink` values. The total of all the shrink values for the five items is `1 + 1 + 1 + 1.5 + 2` = `6.5`. As a result, the width of items with `flex-shrink: 1` is reduced by `1/6.5 * 500px` = `76.92px`, the width of items with `flex-shrink: 1.5` is reduced by `1.5/6.5 * 500px` = `115.38px`, and the width of items with `flex-shink: 2` is reduced by `2/6.5 * 500px` = `153.85px`.