A row of buttons can look roomy at one width and suddenly become cramped when its container narrows. Flexbox resolves that overflow with flex-shrink: it reduces flex items until they fit, starting from each item’s flex base size. In a row, that size is width; in a column, it is height. section 5.1 section 5.2
Shrinking is proportional, not usually equal. Each item first gets a weighted shrink factor: its initial main size multiplied by its flex-shrink value. The browser divides the overflow among those weights, then subtracts each item’s assigned portion from its initial size. A larger item or a larger shrink factor therefore absorbs more of the reduction. section 5.2.2 section 5.5
overflow = sum_of_initial_sizes - container_width
Calculate negative free space before distributing it: overflow is the total initial main sizes minus the container width. section 5.2.2
For a horizontal flex container, calculate the unconstrained result in this order:
- Add the items’ initial widths and subtract the container width to find overflow. section 5.2.2
- Multiply each width by its flex-shrink value, then add those weighted factors. section 5.2.2
- Give each item its weighted-factor share of the overflow. section 5.2.2
- Subtract that share from the item’s initial width to obtain its proposed final width. section 5.2.2
Three oversized items
Three 450px items inside a 600px container begin at 1350px total, so 750px must be removed. With flex-shrink values of 1, 2, and 3, their weights are 450, 900, and 1350. The total weight is 2700, so the items give up 125px, 250px, and 375px respectively, finishing at 325px, 200px, and 75px. Equal base widths do not yield equal reductions when shrink factors differ. section 5.2.2
flex-shrink defaults to 1, but that does not make every item shrink by the same number of pixels. Conversely, flex-grow distributes unused space, whereas flex-shrink handles insufficient space. Both work from the base size determined before distribution begins. section 5.2 section 5.2.2
Use min-width when an item must remain usable. If a proposed width falls below that minimum, Flexbox holds the item at the constraint and redistributes the remaining overflow across items that are still allowed to shrink. Constraints can prevent a container from fitting if their combined minimum widths exceed its available width. section 5.3.1 section 5.4
Protecting the smallest item
The 1/2/3 example proposes widths of 325px, 200px, and 75px. Adding min-width: 100px freezes the third item at 100px. The remaining 25px overflow is split between the first two items by shrink factors 1 and 2, producing about 316.67px, 183.33px, and 100px. section 5.3.1
Prefer the flex shorthand when setting a flex item’s behavior, because it sets flex-grow, flex-shrink, and flex-basis together. A later shorthand can silently replace an individual shrink or growth setting; for example, flex: 1 also establishes flex-shrink: 1 and flex-basis: 0. section 5.2.3 section 5.4
Practical takeaway: when a flex layout compresses unexpectedly, inspect the base sizes, shrink factors, and min/max constraints rather than treating the rendered widths as arbitrary. The calculation reveals which item is expected to yield space and why. section 5.0 section 5.5
