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="size:10x flex-shrink:0" 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:0@sm flex-shrink:1@print">...</div>

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