flex-shrink
Specifies the shrink factor of a flex item. Controls how much each item is reduced when the total size of items exceeds the container.
Sample Code
/* Shrink at the same rate as other items (initial value) */
.item { flex-shrink: 1;}
/* Do not shrink */
.item-fixed { flex-shrink: 0;}
/* Shrink at twice the rate of other items */
.item-shrink { flex-shrink: 2;}
Available Values
| Value | Description |
|---|---|
| <number> | A number of 0 or greater. Initial value is '1' (shrinks at the same rate as others). Negative values are invalid. |
Specification
| Item | Details |
|---|---|
| Initial value | 1 |
| Applies to | Flex items |
| Inherited | No |
| Animation | Yes (interpolated as number) |
Browser Compatibility
Chrome29+ ○
28 △27 △26 △25 △24 △23 △22 △21 or earlier ×
Firefox20+ ○
19 or earlier ×
Safari9+ ○8 △
7 or earlier ×
Edge12+ ○
IE11 ○10 ○9 ×
8 ×7 ×
6 ×
Opera12.1+ ○
11 or earlier ×
iOS Safari9+ ○8 △7 or earlier ×
Android Browser4.4+ ○3 or earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○Overview
'flex-shrink' is a property applied to flex items that controls how much each item shrinks when the total size of items exceeds the container. The initial value is '1', meaning all items shrink at the same rate.
How Shrinking Works
The 'flex-shrink' value works as a ratio. When all items have the initial value of 'flex-shrink: 1', the deficit is reduced equally. Setting a specific item to 'flex-shrink: 0' prevents it from shrinking.
/* Container width: 400px, total item width: 600px → deficit: 200px */
/* All items flex-shrink: 1 → shrink equally */
.item-a { width: 200px; flex-shrink: 1;} /* approx. 133px */
.item-b { width: 200px; flex-shrink: 1;} /* approx. 133px */
.item-c { width: 200px; flex-shrink: 1;} /* approx. 133px */
/* item-a flex-shrink: 0 → does not shrink */
.item-a { width: 200px; flex-shrink: 0;} /* 200px (fixed) */
.item-b { width: 200px; flex-shrink: 1;} /* 100px */
.item-c { width: 200px; flex-shrink: 1;} /* 100px */
Pattern: Fixed-Width Sidebar + Flexible Main Content
/* Keep sidebar fixed, allow main content to shrink */
.layout {
display: flex;
}
.sidebar {
width: 250px;
flex-shrink: 0; /* sidebar stays fixed width */
}
.main {
flex-grow: 1;
flex-shrink: 1; /* main can shrink */
}
The Importance of 'flex-shrink: 0'
For elements that should remain a fixed size (logos, icons, sidebars, etc.), setting 'flex-shrink: 0' is best practice. Using only 'width' may allow unintended shrinking when the container becomes narrow.
Relationship with 'min-width'
The initial value of 'min-width' on a flex item is 'auto', meaning it cannot shrink below the minimum size of its content (text or images). If text overflows even with 'flex-shrink: 1', adding 'min-width: 0' allows the item to shrink below its content size.
/* Fix for text overflow */
.item {
flex-shrink: 1;
min-width: 0; /* allow shrinking below content size */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Related Properties
| Property | Description |
|---|---|
| flex-grow | Specifies the grow factor. 'flex-shrink' is for reducing size; 'flex-grow' is for increasing size. |
| flex-basis | Specifies the base size. The 'flex-shrink' calculation applies to the deficit from the 'flex-basis' size. |
| flex | Shorthand for 'flex-grow', 'flex-shrink', and 'flex-basis'. Using 'flex' is recommended over specifying them individually. |
| min-width | Specifies the minimum width. Shrinking via 'flex-shrink' will not go below this value. |
If you find any errors or copyright issues, please contact us.
シェアする