CSS flex-shrink Property

Definition and Usage

The flex-shrink property sets a flex item’s shrink factor — how much it should give up main-axis size when items are too wide (or tall) for the container.

The initial value is 1 (items may shrink). Use 0 to refuse shrinking. It applies only to flex items inside a display: flex container. It is not inherited. MDN recommends the flex shorthand for everyday grow + shrink + basis patterns.

CSS Syntax

One non-negative number. Examples: 0, 1, 2, 0.5.

Property Values

How to Use flex-shrink

Create overflow pressure on the main axis, then decide which items give way.

1. Set the parent to display: flex with a limited width (or height).
2. Give items a large flex-basis or width so they want more space than the container has.
3. Set flex-shrink on items that should compress (1 is default; 0 locks size).
4. Pair with flex-grow or use the flex shorthand for complete control.

Live Preview

A narrow row holds three wide items. Only item A’s flex-shrink changes.

CSS Examples

Each snippet focuses on flex-shrink. A fixed container width creates the squeeze. Use Try It Yourself for a live editor.

<style>
  .row {
    display: flex;
    width: 280px;
  }

  .item {
    flex-basis: 150px;
    flex-shrink: 1;
  }
</style>

<div class="row">
  <div class="item">A</div>
  <div class="item">B</div>
</div>

<style>
  .row {
    display: flex;
    width: 280px;
  }

  .a {
    flex-basis: 150px;
    flex-shrink: 0;
  }

  .b {
    flex-basis: 150px;
    flex-shrink: 1;
  }
</style>

<div class="row">
  <div class="a">A (0)</div>
  <div class="b">B (1)</div>
</div>

<style>
  .row {
    display: flex;
    width: 280px;
  }

  .a {
    flex-basis: 150px;
    flex-shrink: 1;
  }

  .b {
    flex-basis: 150px;
    flex-shrink: 2;
  }
</style>

<div class="row">
  <div class="a">A (1)</div>
  <div class="b">B (2)</div>
</div>

Key Takeaways