Flex Shrink Property
Last updated: 2026-09-13
flex-shrink Flex Shrink Property
The flex-shrink property sets the shrink factor of a flex item, deciding how much the item shrinks when the container does not have enough space. Its default value is 1, meaning items shrink as needed. A value of 0 keeps the item at its original size even when space runs out. Larger values make the item shrink more when space is tight.
| Category | |
|---|---|
| Initial Value | 1 |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
flex-shrink: <number>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<number> | Type | Shrink factor; 0 means the item does not shrink |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-shrink | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Tip： flex-shrink is a unitless proportion and accepts no negative values. The amount of shrinkage is distributed among the items in proportion to their flex-shrink values: if one item is 2 and another is 1, the former shrinks twice as much.
Warning： flex-shrink only takes effect when the container runs out of space. If the total item width does not exceed the container, flex-shrink has no effect and the items keep their original size.
❓ FAQ
QWhat are the practical uses of flex-shrink: 0?
AIt is commonly used for elements that must keep a fixed size, such as sidebars, logos, icon buttons and pagination. These elements are not compressed when the container runs out of space, preserving readability and the clickable area. A typical pairing: the content area uses flex-shrink: 1 to shrink fluidly while the sidebar uses flex-shrink: 0 to stay fixed. Note that flex-shrink only kicks in after flex-basis and the content sizes are computed, so the fixed element must actually be wider than the container for the effect to be visible.
QWhy is my item still compressed even with flex-shrink: 0?
APossible causes: a max-width or min-width on the item conflicts with the shrink setting; the parent container clips the content with overflow: hidden instead of shrinking; or flex-basis is auto and the item contains long, wrappable text. A common mistake is that a later flex shorthand, such as flex: 1, resets flex-shrink back to 1, so check the cascade order if the property seems ignored. Verify the item’s full size declarations and the parent’s overflow settings, and make sure flex-shrink: 0 is written on the element itself.
QWhat happens when flex-shrink: 1 and flex-shrink: 0 are mixed?
AWhen space is tight, the items with a larger flex-shrink value shrink more. Mixed together, the flex-shrink: 1 items shrink proportionally while the flex-shrink: 0 items keep their size, so the shrinkable items get even narrower and their content may overflow or wrap. This is exactly the common layout trick: the sidebar stays fixed with flex-shrink: 0 while the content area absorbs the shrinkage with flex-shrink: 1.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Flex Shorthand
Shorthand for flex-grow, flex-shrink and flex-basis
Flex Grow
Controls how much a flex item grows
