YouTip

# CSS flex-shrink Property The `flex-shrink` property specifies how a flex item shrinks relative to the rest of the flex items inside the same container when there is negative extra space (i.e., when the total default size of the items is larger than the container). --- ## Definition and Usage The `flex-shrink` property defines the shrinking ability of a flex item. Flex items will only shrink when the sum of their default sizes (defined by `flex-basis` or their intrinsic width) is greater than the width of the flex container. The amount of shrinkage is proportional to the `flex-shrink` value and the item's base size. > **Note:** The `flex-shrink` property has no effect if the element is not a direct child of a flex container (i.e., a flex item). --- ## CSS Syntax ```css flex-shrink: number | initial | inherit; ``` ### Property Values | Value | Description | | :--- | :--- | | `number` | A unitless number specifying how much the item will shrink relative to other flex items. Negative values are invalid. The default value is `1`. | | `initial` | Sets this property to its default value (`1`). | | `inherit` | Inherits this property from its parent element. | --- ## Specifications and Details | Feature | Details | | :--- | :--- | | **Default Value:** | `1` | | **Inherited:** | No | | **Animatable:** | Yes | | **CSS Version:** | CSS3 | | **JavaScript Syntax:** | `object.style.flexShrink = "2"` | --- ## Comprehensive Code Example In this example, the flex container has a total width of `500px`. It contains 5 flex items (A, B, C, D, and E), each with a base width (`flex-basis`) of `120px`. * Items **A, B, and C** are set to `flex-shrink: 1`. * Items **D and E** are set to `flex-shrink: 2`. ```html

Container Width: 500px | Flex Basis per Item: 120px

Items A, B, C are set to flex-shrink: 1. Items D, E are set to flex-shrink: 2.

``` --- ## Mathematical Calculation: How Shrinkage is Calculated To understand exactly how browsers calculate the final width of each item when shrinking, let's break down the math behind the example above: ### 1. Calculate the Overflow Amount * **Total Base Width of Items:** $5 \text{ items} \times 120\text{px} = 600\text{px}$ * **Container Width:** $500\text{px}$ * **Overflow (Negative Space):** $600\text{px} - 500\text{px} = 100\text{px}$ (This is the amount we need to shave off). ### 2. Calculate the Total Weighted Shrink Factor The shrink calculation is not just based on the `flex-shrink` ratio; it is also weighted by the item's `flex-basis` size. $$\text{Weighted Shrink Factor} = \sum (\text{flex-basis} \times \text{flex-shrink})$$ * **For A, B, C:** $120\text{px} \times 1 = 120$ each (Total: $360$) * **For D, E:** $120\text{px} \times 2 = 240$ each (Total: $480$) * **Total Weighted Sum:** $120 + 120 + 120 + 240 + 240 = 840$ ### 3. Calculate the Shrinkage for Each Item The formula to calculate how much width is removed from each item is: $$\text{Shrinkage Amount} = \text{Overflow} \times \frac{\text{Item's Flex Basis} \times \text{Item's Flex Shrink}}{\text{Total Weighted Sum}}$$ * **For Items A, B, and C:** $$\text{Shrinkage} = 100\text{px} \times \frac{120 \times 1}{840} \approx 14.28\text{px}$$ * **For Items D and E:** $$\text{Shrinkage} = 100\text{px} \times \frac{120 \times 2}{840} \approx 28.57\text{px}$$ ### 4. Final Width of Each Item Subtract the shrinkage amount from the original `flex-basis` ($120\text{px}$): * **Final Width of A, B, C:** $120\text{px} - 14.28\text{px} \approx 105.72\text{px}$ * **Final Width of D, E:** $120\text{px} - 28.57\text{px} \approx 91.43\text{px}$ *(Note: The actual rendered widths may vary slightly due to browser subpixel rounding and border/padding configurations).* --- ## Browser Support The numbers in the table specify the first browser version that fully supports the property. Numbers followed by `-webkit-`, `-moz-`, or `-ms-` specify the first version that supported the property with a vendor prefix. | Property | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **flex-shrink** | 29.0
21.0 `-webkit-` | 11.0
10.0 `-ms-` | 28.0
18.0 `-moz-` | 9.0
6.1 `-webkit-` | 17.0 | --- ## Related Articles * CSS Reference: (css3-pr-flex.md) * CSS Reference: (css3-pr-flex-basis.md) * CSS Reference: (css3-pr-flex-direction.md) * CSS Reference: (css3-pr-flex-flow.md) * CSS Reference: (css3-pr-flex-grow.md) * CSS Reference: (css3-pr-flex-wrap.md)