Flex Shrink

Controls the ability of a flex item to shrink when there isn't enough space in the flex container. This is crucial for responsive designs, determining how items behave when space becomes limited. Items with higher shrink values will reduce their size more aggressively when needed. In Tailwind v4, flex-shrink utilities have improved responsive behavior.

Flexbox & Grid1 variant3 examples

Official Docs Open Playground

Basic usage:

<div class="flex w-80 bg-gray-100 overflow-hidden">
  <div class="shrink p-4 bg-blue-100 whitespace-nowrap">Can shrink when needed</div>
  <div class="shrink-0 p-4 bg-blue-300 whitespace-nowrap">Won't ever shrink</div>
</div>

Examples

Comparing shrink vs shrink-0 (non-shrinking) items

<div class="flex w-80 bg-gray-100 overflow-hidden">
  <div class="shrink p-4 bg-blue-100 whitespace-nowrap">Can shrink when needed</div>
  <div class="shrink-0 p-4 bg-blue-300 whitespace-nowrap">Won't ever shrink</div>
</div>

Edit in playground

Navigation bar with shrinking menu items and non-shrinking action button

<!-- Horizontal navigation with shrinking menu items -->
<nav class="flex w-full bg-white border-b overflow-x-auto">
  <a href="#" class="shrink-0 px-6 py-4 text-blue-600 border-b-2 border-blue-600 font-medium">Home</a>
  <a href="#" class="shrink px-6 py-4 text-gray-700 hover:text-blue-600 whitespace-nowrap">Our Products</a>
  <a href="#" class="shrink px-6 py-4 text-gray-700 hover:text-blue-600 whitespace-nowrap">Customer Support</a>
  <a href="#" class="shrink px-6 py-4 text-gray-700 hover:text-blue-600 whitespace-nowrap">Documentation</a>
  <a href="#" class="shrink px-6 py-4 text-gray-700 hover:text-blue-600 whitespace-nowrap">Resources</a>
  <a href="#" class="shrink-0 ml-auto px-6 py-4 bg-blue-600 text-white">Contact Us</a>
</nav>

Edit in playground

File browser with resizable panels using flex-shrink

<!-- File browser panel with resizable sections -->
<div class="flex h-80 bg-white border rounded overflow-hidden">
  <!-- Sidebar - can shrink when space is limited -->
  <div class="shrink w-64 min-w-20 bg-gray-100 border-r p-4 overflow-auto">
    <h3 class="font-bold mb-3">Folders</h3>
    <ul class="space-y-1">
      <li><a href="#" class="block px-2 py-1 rounded hover:bg-gray-200">Documents</a></li>
      <li><a href="#" class="block px-2 py-1 rounded hover:bg-gray-200">Images</a></li>
      <li><a href="#" class="block px-2 py-1 rounded hover:bg-gray-200">Videos</a></li>
      <li><a href="#" class="block px-2 py-1 rounded hover:bg-gray-200">Downloads</a></li>
    </ul>
  </div>
  
  <!-- Main content - grows and can shrink -->
  <div class="grow shrink min-w-0 p-4 overflow-auto">
    <h2 class="text-lg font-bold mb-3">Files</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      <!-- File items -->
      <div class="p-3 border rounded hover:bg-gray-50">
        <div class="w-full aspect-square bg-blue-100 mb-2 flex items-center justify-center text-blue-500">DOC</div>
        <div class="truncate text-sm">Document.docx</div>
      </div>
      <!-- More file items -->
    </div>
  </div>
  
  <!-- Preview panel - won't shrink -->
  <div class="shrink-0 w-80 bg-gray-50 border-l p-4">
    <h3 class="font-bold mb-3">Preview</h3>
    <div class="bg-white border rounded p-4 h-60 flex items-center justify-center">
      <p class="text-gray-500">Select a file to preview</p>
    </div>
  </div>
</div>

Edit in playground

Live Preview

Try the Flex Shrink utility with different values

Open Interactive Playground

Variants

shrink-0: item doesn't shrink (flex-shrink: 0), shrink: item can shrink when needed (flex-shrink: 1); arbitrary values can be specified using square bracket notation, e.g., shrink-[2]