Flex shrink

Utilities for controlling how flex items shrink


Class reference

ClassProperties
flex-shrinkflex-shrink: 1;
flex-shrink-0flex-shrink: 0;

# Shrink

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

<div class="flex ...">
<div class="flex-grow w-16 h-16 ...">
<!-- This item will grow or shrink as needed -->
</div>
<div class="flex-shrink w-64 h-16 ...">
<!-- This item will shrink -->
</div>
<div class="flex-grow w-16 h-16 ...">
<!-- This item will grow or shrink as needed -->
</div>
</div>

# Don’t shrink

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

<div class="flex ...">
<div class="flex-1 h-16 ...">
<!-- This item will grow or shrink as needed -->
</div>
<div class="flex-shrink-0 h-16 w-32 ...">
<!-- This item will not shrink below its initial size-->
</div>
<div class="flex-1 h-16 ...">
<!-- This item will grow or shrink as needed -->
</div>
</div>

# Responsive

To control how a flex item shrinks at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:flex-shrink-0 to apply the flex-shrink-0 utility at only medium screen sizes and above.

<div class="flex ...">
<!-- ... -->
<div class="flex-shrink md:flex-shrink-0 ...">
Responsive flex item
</div>
<!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.