Flex Shrink

Flex Shrink

flex-grow handles expansion when there's extra space. flex-shrink handles the opposite — contraction when there isn't enough space. It controls how items shrink to prevent overflow.

The Overflow Problem

.container {
    display: flex;
    width: 600px;
}

/* Three items at 300px each = 900px needed, but only 600px available.
   Without flex-shrink, items would overflow the container. */
.item {
    width: 300px;
}

Default Behavior: flex-shrink: 1

By default, all flex items have flex-shrink: 1, meaning they shrink equally to fit:

.item {
    width: 300px;
    flex-shrink: 1;  /* Default — items shrink proportionally */
}

/* 900px needed, 600px available → 300px overflow
   Each item shrinks by 100px → final width: 200px each */

Preventing Shrinking: flex-shrink: 0

.sidebar {
    width: 250px;
    flex-shrink: 0;  /* Never shrink — stays at 250px */
}

.main {
    flex-grow: 1;
    flex-shrink: 1;  /* This one absorbs the shrinkage */
}

Setting flex-shrink: 0 on an item means it will not shrink regardless of container size. Useful for fixed-width sidebars, logos, and icons.

How Shrink Values Work

Container: 600px
Item A: width 300px, flex-shrink: 2
Item B: width 300px, flex-shrink: 1
Item C: width 300px, flex-shrink: 1

Total overflow: 900 - 600 = 300px to remove

Shrink ratios: 2 + 1 + 1 = 4
Item A loses: 300 × (2/4) = 150px → final: 150px
Item B loses: 300 × (1/4) = 75px  → final: 225px
Item C loses: 300 × (1/4) = 75px  → final: 225px

flex-shrink Values

Value	Behavior
0	Item will never shrink — may cause overflow
1 (default)	Item shrinks proportionally when needed
2, 3, etc.	Item shrinks more aggressively than items with lower values

Practical Example: Fixed Logo + Flexible Nav

.header {
    display: flex;
    align-items: center;
}

.logo {
    flex-shrink: 0;   /* Logo never shrinks */
    width: 150px;
}

.nav {
    flex-shrink: 1;   /* Nav items can shrink */
    display: flex;
    gap: 16px;
}

.header-actions {
    flex-shrink: 0;   /* Buttons don't shrink */
    margin-left: auto;
}

flex-grow vs flex-shrink

Property	When It Activates	Default
flex-grow	Extra space available	0 (don't grow)
flex-shrink	Not enough space	1 (do shrink)

Notice the asymmetry: by default, items don't grow but do shrink. Items naturally stay small but avoid overflowing.

Text Truncation with Shrink

.card-title {
    flex-shrink: 1;
    min-width: 0;            /* Required for text truncation in flex */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Important: flex items have an implicit min-width: auto which prevents them from shrinking below their content size. Set min-width: 0 to allow text truncation.

Key Takeaways

• flex-shrink: 1 (default) — items shrink proportionally to fit
• flex-shrink: 0 — item never shrinks (stays fixed-width)
• Higher values mean the item shrinks more aggressively
• Flex items have implicit min-width: auto — set min-width: 0 to allow full shrinking
• Use flex-shrink: 0 on logos, icons, and fixed-width UI elements