A weighted shrink factor determines how much a flex item contributes to proportional shrinking when the items overflow their container. Calculate it by multiplying the item's base size by its flex-shrink value. section 5.2.2
The flex-shrink calculation proceeds as follows:
- Find the overflow by subtracting the container width from the sum of the items' initial main sizes. section 5.2.2
- Compute each weighted shrink factor as item width multiplied by its flex-shrink value. section 5.2.2
- Divide each factor by the total of all weighted shrink factors to find that item's share of the overflow. section 5.2.2
- Subtract each item's allocated overflow from its initial size to obtain its final width. section 5.2.2
Three flex items
Three 450px items overflow a 600px container by 750px. With flex-shrink values 1, 2, and 3, their weighted factors are 450, 900, and 1,350. They receive 125px, 250px, and 375px of shrinkage, leaving final widths of 325px, 200px, and 75px. section 5.2.2
item_weighted_shrink_factor = item_width * item_flex_shrink_factor
Use the formula listing to verify the weighted shrink factor directly in the flex-shrink calculation. section 5.2.2
