Layout
flex-shrink
flex-shrink goes on a flex item and sets how much the item shrinks when the items don't fit in the container.
Syntax
<number [0,∞]>Preview
Code
.box {
display: flex;
}
.box > :nth-child(2) {
flex-shrink: 0;
}Controls
About
Values
Write a number of 0 or more without a unit. The initial value is 1, which shrinks at the same rate as the other items. 0 does not shrink. It goes on the items inside, not on the flex container.
The preview on this page makes the box display: flex with a helper declaration and puts flex-shrink on the second item only (.box > :nth-child(2) is a selector for the second child of the box). Each item is 30% of the box wide, so four of them overflow it. The other items shrink with the initial 1, so changing the value changes how the outlined item 2 shrinks compared with them.
How the overflow is shared
The width that overflows the box is shared among the items in the ratio of flex-shrink × base size (flex-basis) and taken off each one. When the base sizes are equal, it follows the flex-shrink values, so an item with 3 shrinks three times as much as the others. Items with a larger base size shrink more, so even when every value is 1, wider items lose more width.
Items don't shrink below their content
By default a flex item doesn't shrink below its minimum content width, such as a long word or an image (min-width: auto). The other items shrink to make up for it. When a long URL keeps an item from shrinking, put min-width: 0 on the item. Items with overflow: hidden or similar can also shrink below their minimum content width.
In a wrapping container
With flex-wrap: wrap, items that don't fit move to the next line, so items only shrink when a single item is wider than the line.
The flex shorthand
It is usually written with flex-grow and flex-basis in the flex shorthand. flex: none is the same as flex: 0 0 auto, which neither grows nor shrinks. Use it for items whose width should stay fixed, such as icons.