flex-shrink

Setting how flex items shrink.

Overview

Examples

Allow an item to shrink

Use flex-shrink:1 when a flex item can become smaller than its basis to fit the row.

<div class="flex">  <main class="flex-shrink:1 min-w:0">...</main></div>

@layer utilities {  .flex {    display: flex  }  .flex-shrink\:1 {    flex-shrink: 1  }  .min-w\:0 {    min-width: 0  }}

Prevent fixed media from shrinking

Use flex-shrink:0 for icons, avatars, and fixed side regions that should preserve their measured size.

<img class="flex-shrink:0 size:10x" src="..." alt="" />

Text siblings often need min-w:0 so they shrink instead of pushing fixed media out of the container.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="flex-shrink:1 flex-shrink:1@print flex-shrink:0@sm">...</div>

Use flex when the grow, shrink, and basis values should be expressed as one rule.