When the total size of Flex Items is larger than the available space in the Flex Container, the browser can reduce the size of the items according to their shrink factors.

The default value of flex-shrink is 1.

Syntax

.item {
    flex-shrink: number;
}

Default Value

.item {
    flex-shrink: 1;
}

A value of 1 means the Flex Item is allowed to shrink when the container does not have enough space.

Flex Shrink Diagram

Item 1

Item 2

Item 3

When the Flex Items require more space than the container provides, shrink factors determine how the items reduce their size.

Example 1: flex-shrink: 1

When Flex Items have flex-shrink: 1, they are allowed to become smaller when the available space is insufficient.

.item {
    flex-basis: 220px;
    flex-shrink: 1;
}

Output

Item 1

Item 2

Item 3

The container has limited space, so the items are allowed to shrink from their 220px basis.

Example 2: flex-shrink: 0

A value of 0 prevents a Flex Item from shrinking.

.item {
    flex-basis: 220px;
    flex-shrink: 0;
}

Output

Item 1

Item 2

Item 3

Because the shrink factor is 0, the items do not shrink from their 220px basis. The container therefore needs to handle the extra content, such as through overflow or responsive wrapping.

Example 3: Different Shrink Factors

Different shrink values allow different Flex Items to participate in shrinking at different rates.

.item1 {
    flex-basis: 220px;
    flex-shrink: 1;
}

.item2 {
    flex-basis: 220px;
    flex-shrink: 2;
}

.item3 {
    flex-basis: 220px;
    flex-shrink: 1;
}

Item 1 has a shrink factor of 1.

Item 2 has a shrink factor of 2.

Item 3 has a shrink factor of 1.

The second item therefore has a higher shrink factor than the other two items.

Output

Shrink 1

Shrink 2

Shrink 1

Flex Shrink Values

Value	Meaning
0	The item does not shrink.
1	The item is allowed to shrink.
2	The item has a higher shrink factor than an item with value 1.
3	The item has an even higher shrink factor.

How Flex Shrink Works

Step 1

The browser determines whether the Flex Items require more space than the container provides.

Step 2

The browser considers the flex-shrink values of the items.

Step 3

The items are reduced according to their shrink factors and their available space.

Flex Grow vs Flex Shrink

Property	Purpose	Used When
flex-grow	Controls how an item uses extra available space.	Extra space is available.
flex-shrink	Controls how an item reduces its size.	Available space is insufficient.

Flex Shrink with Flex Basis

flex-basis defines the initial main-axis size of a Flex Item, while flex-shrink controls whether that size can be reduced when there is not enough space.

.course-card {
    flex-basis: 300px;
    flex-shrink: 1;
}

The preferred starting size is 300px.

Because flex-shrink: 1 is used, the card can become smaller when the container cannot provide 300px of space.

Example 🌍

Flex Shrink is commonly useful for responsive navigation bars, dashboards, cards, product layouts, and course sections.

.course-card {
    flex-basis: 280px;
    flex-shrink: 1;
}

.fixed-card {
    flex-basis: 280px;
    flex-shrink: 0;
}

The first course card can become smaller when space is limited.

The second card keeps its preferred size because its shrink factor is 0.

Important: The default value of flex-shrink is 1. Setting flex-shrink: 0 prevents an item from shrinking. The actual final size of a Flex Item also depends on other Flexbox properties, available container space, and the item's content.

Summary

The flex-shrink property controls how Flex Items reduce their size when the Flex Container does not have enough available space. Its default value is 1. A value of 0 prevents shrinking, while higher values create a higher shrink factor relative to other Flex Items.

← Previous: Flex Grow

Next: Flex Basis →