The CSS flex-shrink property controls how much a flex item contracts when the items’ initial main sizes exceed the available space. A value of 0 prevents shrinking; positive values allow it. Larger values shrink more, while the item’s initial size also affects the result. section 4.2.3
Fitting two columns around a gap
Suppose a main column targets 66.67% and a sidebar targets 33.33%, with a 1.5em gap between them. Their percentages already consume the container’s full width, so the gap causes overflow. Giving both columns flex-shrink: 1 lets the browser subtract space from each column until the layout fits. This provides an alternative to sizing the columns with flex-grow, though padding can produce slightly different final widths. section 4.2.3
Use flex-shrink with these practical distinctions:
- Set flex-shrink: 0 when an item must retain its initial size, accepting possible overflow. section 4.2.3
- Use higher shrink factors to make selected items surrender proportionally more space. section 4.2.3
- Remember that flex-shrink is one part of flex: flex-grow, flex-shrink, and flex-basis jointly determine item sizing. section 4.2
- In a vertical flexbox, shrinking affects height only when another constraint gives the container a specific height. section 4.3.1
Figure 4.12 Flex items can have an initial size exceeding that of the flex container.
Inspect the overflow scenario that triggers flex-item shrinking before space is redistributed. section 4.2.3
