A 240px-wide logo in a flex toolbar gets squeezed on narrow screens even though its width is set, and the widest item loses the most space. Explain what the shrink algorithm is doing and how you would fix the logo.

## Shrinking is the default, growing is not A flex item you never configured behaves as `flex: initial`, i.e. `flex-grow: 0; flex-shrink: 1; flex-basis: auto`. The asymmetry catches people out: items will *not* expand into free space unless you ask, but they *will* be compressed below their declared size without being asked. Flexbox's priority is fitting the line, and `width` is an input to that negotiation rather than a guarantee. ## The weighted-shrink formula When the sum of the items' hypothetical main sizes exceeds the container's inner main size, the difference is the **negative free space**, and it is distributed using a *scaled* shrink factor: ``` scaled factor(item) = flex-shrink(item) × flex base size(item) shrinkage(item) = deficit × scaled factor(item) / Σ scaled factors ``` Worked example: a 400px row with two items whose bases are 300px and 200px, both `flex-shrink: 1`. - Deficit = (300 + 200) − 400 = 100px. - Scaled factors: 300 and 200; sum 500. - Item A loses 100 × 300/500 = 60px → **240px**. - Item B loses 100 × 200/500 = 40px → **160px**. So the wider item absorbed 60% of the cut. This is why your logo shrinks *more* than a narrow icon next to it: it is bigger, so it is charged more. ## Why weight by base size at all If the deficit were split evenly in pixels, a 40px icon beside a 600px content column would be asked to give up the same 50px, and the icon would collapse to nothing while the column barely noticed. Weighting by base size makes shrinkage *proportional* — every item loses roughly the same percentage of itself — which keeps small items visible. Grow is not weighted this way, and that asymmetry is intentional: growth by base size would make already-large items run away. ## Fixing the toolbar Opt the fixed element out of the negotiation: ```css .toolbar { display: flex; } .toolbar .logo { flex: 0 0 240px; } /* base 240px, no grow, no shrink */ .toolbar .nav { flex: 1; } /* absorbs the remaining space */ ``` `flex: 0 0 240px` states the whole contract in one line: start at 240px, take none of the surplus, absorb none of the deficit. `flex-shrink: 0` alone works too if you want to keep `width: 240px` as the source of the size (`flex-basis: auto` will defer to it). What does *not* work is escalating the `width` declaration — `!important` on a `width` changes the base size, not the item's shrinkability. Be aware of the tradeoff you have just made: an item with `flex-shrink: 0` will overflow the container rather than compress when the viewport gets small enough. That is usually correct for a logo with a fixed asset, but for text-bearing elements it converts a squeeze into an overflow, so pair it with a wrap or a media query at the breakpoint where the line genuinely runs out of room. ## Shrinking has a floor The formula is not the last word. Each item's shrunk size is clamped by its minimum size, and flex items have an **automatic minimum size** rather than zero — so an item can stop shrinking while the arithmetic still wants it smaller. When that happens the item is frozen at its floor and the remaining deficit is redistributed across the items that can still shrink, which is why a line sometimes overflows even though nothing has `flex-shrink: 0`. ## Choosing shrink factors deliberately Beyond `0` and `1`, explicit factors let you rank what gives way first. A `flex-shrink: 3` on a decorative panel next to `flex-shrink: 1` on the main content means the panel absorbs three times the cut per unit of base size — a reasonable way to encode "squeeze the chrome before the content". Keep the set of factors small and documented; a codebase where every component picks its own shrink number is hard to reason about, because the outcome for any one item depends on the factors of every sibling on the same line. ## The one-breath answer "Items shrink by default — `flex-shrink` is `1` — and the deficit is shared in proportion to shrink factor times base size, so the biggest item pays the most. To hold the logo at 240px, take it out of the negotiation with `flex: 0 0 240px`, and accept that it will now overflow instead of compress at very small widths."