flex-shrink is a flexbox property for the crowded moments: when flex items do not fit in their container, it helps decide which items give up space. Think of a row of packed suitcases. If the car is too small, every suitcase may need to squeeze a little—or one suitcase can be told to squeeze more than the others. section 12.18 section 12.6
Every flex item starts with flex-shrink: 1, so items are treated equally by their shrink setting. Their actual size still matters: when items begin at different widths, a wider item shrinks more. The detailed calculation is intentionally left aside; use the property as a practical control. section 12.6
item {
flex-shrink: value;
}
Set flex-shrink on an item with a number. Values above 1 make it shrink more than neighboring items; values between 0 and 1 make it shrink less; 0 tells it not to shrink. section 12.6
Use the values as simple packing instructions:
- Use 1 for the normal, shared shrink behavior. section 12.6
- Use a value greater than 1 when an item can sacrifice more room. section 12.6
- Use a value between 0 and 1 when an item should sacrifice less room. section 12.6
- Use 0 for an item that must keep its size, such as an image or logo. section 12.6 section 12.12
Keep the picture, flex the words
A thumbnail list places an image beside its description. Make each list item a flex container, give the thumbnail flex-shrink: 0, and let the text take remaining room with flex-grow: 1. The image stays intact while the text area adjusts to the container. section 12.8 section 12.9
A nonshrinking item still cannot override the space needed by content in every situation. If raising a shrink value no longer makes an item smaller, it may already be at the minimum size needed to display its content. section 12.6
For a flexible page layout, pair flex-shrink: 0 with a flex-basis value to establish a minimum block width, then use flex-wrap when the viewport cannot hold the blocks in one row. section 13.9
