Flexbox & Grid

Flex Shrink

Utilities for controlling how flex items shrink.

Basic usage

Shrink

Use shrink to allow a flex item to shrink if needed:

<div className="flex ...">
  <div className="flex-none w-14 h-14 ...">
    01
  </div>
  <div className="**shrink** w-64 h-14 ...">
    02
  </div>
  <div className="flex-none w-14 h-14 ...">
    03
  </div>
</div>

Don't shrink

Use shrink-0 to prevent a flex item from shrinking:

<div className="flex ...">
  <div className="flex-1 h-16 ...">
    01
  </div>
  <div className="**shrink-0** h-16 w-32 ...">
    02
  </div>
  <div className="flex-1 h-16 ...">
    03
  </div>
</div>