flex-shrink

Defines how a flex item shrinks when the container has less space than the sum of its items.

Default value: 1 (does shrink).
If you set 0, that item will not shrink even if space is lacking.

Example

All three items start from flex-basis: 12rem. The child-1 item does not shrink because its flex-shrink is 0, while the others shrink since theirs is 1. Move the width control to see it.

ResultLiveContainer width50%

html

<div class="container">
  <span class="child-1">1</span>
  <span class="child-2">2</span>
  <span class="child-3">3</span>
</div>

<div class="container">
  <span class="child-1">1</span>
  <span class="child-2">2</span>
  <span class="child-3">3</span>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
}

.child-1 {
  background: #d9d2f5;
  flex-basis: 12rem;
  flex-shrink: 0;
  padding: 1rem;
}

.child-2 {
  flex-basis: 12rem;
  flex-shrink: 1;
  padding: 1rem;
}

.child-3 {
  flex-basis: 12rem;
  flex-shrink: 1;
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
}

.child-1 {
  background: #d9d2f5;
  flex-basis: 12rem;
  flex-shrink: 0;
  padding: 1rem;
}

.child-2 {
  flex-basis: 12rem;
  flex-shrink: 1;
  padding: 1rem;
}

.child-3 {
  flex-basis: 12rem;
  flex-shrink: 1;
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.