flex-shrink

Distribute negative free space while respecting item minimum sizes.

Overview

Examples

Allow an item to shrink

flex-shrink distributes a shortage of space relative to each item’s basis. These 192px and 96px bases, plus the 16px gap, exceed the 280px row. With equal shrink factors, the larger basis loses twice as much width.

<div id="layout" class="flex gap-md w:17.5rem max-w:100%">  <div id="target" class="flex-basis:12rem flex-shrink:1 h:6rem min-w:0"><span class="block p-sm">192px basis</span></div>  <div id="peer" class="flex-basis:6rem flex-shrink:1 h:6rem min-w:0"><span class="block p-sm">96px basis</span></div></div>

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

At the full 280px row width, the items settle at 176px and 88px. min-w:0 removes their automatic content minimum so the shrink calculation can fit the row.

Prevent fixed media from shrinking

flex-shrink:0 keeps a fixed avatar from losing width when a long text sibling needs space. The 48px avatar stays square; the text box can shrink and wrap inside the 280px row.

<div id="layout" class="flex items-center gap-md w:17.5rem max-w:100%">  <span id="target" class="grid flex-shrink:0 place-items:center width:3rem height:3rem" aria-hidden="true">AL</span>  <div id="peer" class="wrap-anywhere flex-basis-xs min-w:0 p-sm">Alexandra Lee<br>alexandra.lee@collaborative.design.example</div></div>

Removing the minimum-width constraint changes the box’s sizing. A separate wrapping rule handles an unbroken address that would otherwise paint outside it.

Apply conditionally

Use conditional queries to preserve the blue item’s 192px basis from sm. The row remains 280px wide so resizing isolates the change in shrink behavior; the violet item absorbs the remaining shortage.

<div id="layout" class="flex gap-md w:17.5rem max-w:100%">  <div id="target" class="flex-basis:12rem flex-shrink:1 h:6rem min-w:0 flex-shrink:0@sm"><span class="block p-sm">Target</span></div>  <div id="peer" class="flex-basis:6rem flex-shrink:1 h:6rem min-w:0"><span class="block p-sm">Peer</span></div></div>

Use flex when growth, shrinkage and basis should be expressed as one rule.