Tailwind Flex Shrink

flex-shrink controls how much a flex item is allowed to shrink relative to its siblings when there’s not enough space in the container. With Tailwind's flex-shrink class, you can easily adjust how flex items shrink along the main axis when there is not enough space available.

How to apply Tailwind Flex Shrink

To apply tailwind flex shrink to a flex item, you can use the shrink-{value} utility class, where {value} represents the desired shrink factor. The {value} can range from 0 to a positive integer, determining the proportion at which the flex item should shrink relative to other flex items.

<div class="flex">
  <div class="shrink-0">Item 1</div>
  <div class="shrink">Item 2</div>
  <div class="shrink-2">Item 3</div>
</div>

Preview

In the above example, three flex items are placed within a flex container. The shrink-0 class is applied to the first item, indicating that it should not shrink and maintain its original size. The shrink class is applied to the second item, indicating that it can shrink along with other flex items if necessary. The shrink-2 class is applied to the third item, indicating that it should shrink at twice the rate of the second item.

Responsive Tailwind Flex Shrink

Tailwind CSS allows you to apply flex shrink responsively at different breakpoints. To use responsive tailwind flex shrink classes, you can append the breakpoint prefix to the flex shrink class. For example, md:flex-shrink-2 applies a flex shrink value of 2 starting from the medium breakpoint and above.

<div class="flex gap-4">
  <div class="shrink-0 md:shrink-2 bg-green-500 p-4 text-white font-bold">Responsive Shrink</div>
  <div class="shrink md:shrink-0 bg-gray-300 p-4">Default Shrink</div>
</div>

Preview

In the above example, the tailwind flex shrink behavior of the items is modified based on the breakpoints. The first item has a shrink-0 value of 0 by default, but starting from the medium breakpoint and above (md:shrink-2), it shrinks by the value of 2. The second item has a shrink value of 1 by default, but starting from the medium breakpoint and above (md:flex-shrink), it has a shrink value of 0.

Arbitrary Value Usage

When you need custom shrink rates:

<div class="flex gap-4 text-white font-bold">
  <div class=" bg-indigo-500 p-4 rounded">none</div>
  <div class="shrink-[3] bg-yellow-500 p-4 rounded">Shrinks slower</div>
  <div class=" bg-indigo-500 p-4 rounded">none</div>
</div>

Preview

Customization in tailwind.config.js

You can define your own shrink values:

module.exports = {
  theme: {
    extend: {
      flexShrink: {
        '2': '2',
        '3': '3',
        'half': '0.5',
      }
    }
  }
}

Usage:

<div class="flex-shrink-half">Custom Shrink</div>

Real UI Component Example

Scrollable Horizontal Card List — keep thumbnails fixed, let text shrink.

<div class="flex overflow-x-auto gap-4 p-4 bg-gray-100">
  <div class="flex-shrink-0 w-40 h-40 bg-blue-400"></div>
  <div class="flex flex-col justify-between p-4 bg-white shadow flex-shrink">
    <h2 class="text-lg font-bold">Card Title</h2>
    <p class="text-gray-600">
      This text will shrink when the screen is small but the thumbnail stays fixed.
    </p>
  </div>
</div>

Preview

Best Practices for Devs/Designers

• Use flex-shrink-0 for logos, icons, and fixed-size elements.

• Avoid forcing all elements to flex-shrink-0—it can cause overflow issues.

• Combine with flex-grow and basis for precise layout control.

• Test at multiple breakpoints to avoid clipped content.

Accessibility Notes

• Shrinking content too aggressively can make text unreadable—test zoomed layouts.

• Keep touch targets and buttons above 44px height even when shrinking.

• Ensure that important controls don’t disappear when space is tight.

Tailwind flex shrink class table

✨ What's Next?

Now that you’ve mastered Tailwind flex shrink, try experimenting with:

• Tailwind CSS flex grow

Windframe Tailwind blocks

footer