CSS flex-shrink Property

What You’ll Learn

The flex-shrink property controls how much a flex item shrinks when the flex container runs out of space. It is essential for responsive layouts that must adapt on smaller screens without breaking.

Introduction

The flex-shrink property in CSS is part of the Flexible Box Layout Module (Flexbox). It specifies the shrink factor of a flex item, which determines how much the item will shrink relative to the rest of the flex items in the flex container when there is not enough space.

Definition and Usage

Apply flex-shrink on flex items inside a container with display: flex. Use higher values when an item should give up more space under pressure — for example, a flexible content area with flex-shrink: 2 and a logo with flex-shrink: 0 so the logo never gets squashed.

📝 Syntax

The syntax for the flex-shrink property is straightforward. It is applied to flex items within a flex container:

element {
  flex-shrink: number;
}

Here, number is a non-negative value that represents the shrink factor of the flex item.

Basic Example

.logo {
  flex-shrink: 0; /* never shrink */
}

Default Value

The default value of the flex-shrink property is 1, which means flex items will shrink proportionally when the flex container has insufficient space.

Syntax Rules

• Apply on flex items, not on the flex container.
• Accepts non-negative numbers (0, 1, 2, etc.).
• A value of 0 means the item will not shrink below its flex-basis (unless min-width forces otherwise).
• Values are proportional ratios, not percentages or pixel sizes.
• The property is not inherited.
• Works along the main axis only (row or column depending on flex-direction).

💎 Property Values

How shrink factors divide overflow

If three items have shrink values of 1, 2, and 1, and the container needs to remove 200px of overflow, items 1 and 3 each give up 50px while item 2 gives up 100px — a 1:2:1 ratio. An item with flex-shrink: 0 is excluded from shrinking entirely.

Examples Gallery

In this example, we’ll demonstrate how the flex-shrink property affects flex items when the flex container is too small to fit all items — plus fixed sidebars, toolbars, and card rows.

<style>
  .container {
    display: flex;
    width: 300px;
    background: lightgrey;
  }
  .item {
    flex: 1;
    padding: 10px;
    background: cornflowerblue;
    color: white;
    text-align: center;
  }
  .item:nth-child(2) {
    flex-shrink: 2;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.sidebar {
  flex-shrink: 0;
  width: 180px;
}
.main {
  flex-shrink: 1;
}

.toolbar-title {
  flex-shrink: 1;
  min-width: 0;
}
.toolbar-btn {
  flex-shrink: 0;
}

.card {
  flex: 1 1 120px;
}
.card--wide {
  flex: 2 2 160px;
}

♿ Accessibility

• Do not shrink interactive targets too small — buttons and links need enough tap area on mobile.
• Pair shrinking with text overflow — use text-overflow: ellipsis so truncated labels remain understandable.
• Test at narrow viewports — ensure critical content is still reachable after items shrink.
• Use semantic structure — shrinking is visual; keep logical DOM order for screen readers.
• Set min-width on inputs so form fields do not become unusably narrow.

💡 Best Practices