CSS flex-shrink Property

CSS flex-shrink Property

The flex-shrink property in CSS controls how much a flex item shrinks when there’s not enough space in a flex container. It works only when display: flex; is applied to the parent.

1. Syntax

selector {
  flex-shrink: number;
}

Value	Description
0	The item will not shrink, even if there isn’t enough space.
1 (default)	The item shrinks proportionally when needed.
2+	The item shrinks twice as fast as other items.

2. Basic Example

✅ Default Behavior (flex-shrink: 1;)

.container {
  display: flex;
  width: 400px;
  border: 2px solid black;
}

.item {
  flex: 1;
  padding: 20px;
  background: lightblue;
}

.item:nth-child(2) {
  flex-shrink: 2;
  background: lightcoral;
}

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

✅ Item 2 shrinks twice as fast as Item 1 and Item 3.

✅ Prevent Shrinking (flex-shrink: 0;)

.item {
  flex-shrink: 0;
}

✅ The item won’t shrink, even if space runs out.

3. Combining flex-shrink with flex-grow and flex-basis

Instead of setting flex-shrink alone, it's often better to use the shorthand:

.item {
  flex: 1 2 200px;  /* flex-grow: 1; flex-shrink: 2; flex-basis: 200px; */
}

✅ This means:

• Grows if space is available (1)
• Shrinks twice as fast (2)
• Starts with a base width of 200px

4. Best Practices

✔ Use flex-shrink: 0; for elements, you don’t want to shrink.
✔ Use higher values when some elements should shrink faster than others.
✔ Combine with flex-grow and flex-basis for better layout control.