flex-shrink

flex-shrink controls how a flex item participates when the container has less main-axis room than the items’ bases need. Shrink factors are weighted by each item’s base size.

Equal factors, different losses

The bases total 240px inside a 180px container. With factor 1 on both, the 160px item loses 40px and the 80px item loses 20px, leaving 120px and 60px.

<div class="row">
  <div class="first">Large</div>
  <div class="second">Small</div>
</div>

.row {
  display: flex;
  width: 180px;
}
.row > div {
  flex-grow: 0;
  flex-shrink: 1;
  min-width: 0;
  background: #dbeafe;
}
.first {
  flex-basis: 160px;
}
.second {
  flex-basis: 80px;
}
.row > .second {
  background: #bfdbfe;
}

Keep a small badge from shrinking

The badge opts out; the message can shrink and wrap. The surrounding layout still needs enough space for the badge itself.

<div class="row">
  <span class="badge">New</span>
  <p class="message">Workshopregistrationopensnextweek</p>
</div>

.row {
  display: flex;
  gap: 0.5rem;
  max-width: 20rem;
}
.badge {
  flex: 0 0 auto;
  padding: 0.5rem;
  background: #eff6ff;
}
.message {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

Values and minimums

The initial value is 1 and flex-shrink is not inherited. Values are nonnegative; zero opts out of shrinking. The scaled factor multiplies the base size, so equal shrink factors do not remove equal pixels from different-sized bases.

Automatic content minimums or explicit min-width/min-height can stop shrinking. Min-width:0 permits a row item to shrink past its automatic content minimum but does not itself wrap or hide overflowing text. Use suitable wrapping or scrolling.

Avoid clipping fixes

Overflow:hidden can conceal the problem by losing content. Preserve important text and test narrow widths. Flex-shrink belongs on flex items and has no effect if there is no negative free space to distribute. Use flex to set a coherent sizing combination and min-width to understand the constraint.

Sources and browser support

MDN: flex-shrink describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.