What is Flex grow and shrink in Tailwind?

Tailwindmarkup~5 mins

Flex grow and shrink in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Flex grow and shrink help control how items inside a container get bigger or smaller to fill space nicely.

You want boxes inside a row to share extra space evenly.

You want some items to stay small while others grow bigger.

You want items to shrink if the screen is smaller so nothing breaks.

You want a flexible layout that adjusts on different screen sizes.

Syntax

Tailwind

flex-grow-{number}
flex-shrink-{number}

flex-grow-{number} sets how much an item can grow compared to others.

flex-shrink-{number} sets how much an item can shrink compared to others.

Examples

The first box won't grow, the second box will take extra space.

Tailwind

<div class="flex">
  <div class="flex-grow-0">No grow</div>
  <div class="flex-grow">Grow</div>
</div>

The first box won't get smaller if space is tight, the second box will shrink.

Tailwind

<div class="flex">
  <div class="flex-shrink-0">No shrink</div>
  <div class="flex-shrink">Shrink</div>
</div>

The second box grows twice as much as the first when extra space is available.

Tailwind

<div class="flex">
  <div class="flex-grow-1">Grow 1</div>
  <div class="flex-grow-2">Grow 2</div>
</div>

Sample Program

This page shows two rows. The first row has three boxes: two grow with different rates and one does not grow. The second row has two boxes: one that never shrinks and one that shrinks if space is tight. Resize the browser to see how they behave.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Flex Grow and Shrink Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Flex Grow and Shrink Demo</h1>
  <div class="flex border border-gray-400 h-20 mb-6">
    <div class="bg-blue-400 flex-grow text-white flex items-center justify-center">Grow 1</div>
    <div class="bg-green-400 flex-grow-2 text-white flex items-center justify-center">Grow 2</div>
    <div class="bg-red-400 flex-grow-0 text-white flex items-center justify-center">No Grow</div>
  </div>
  <div class="flex border border-gray-400 h-20 max-w-xs overflow-hidden">
    <div class="bg-purple-400 flex-shrink-0 text-white flex items-center justify-center w-40">No Shrink</div>
    <div class="bg-yellow-400 flex-shrink text-black flex items-center justify-center w-40">Shrink</div>
  </div>
</body>
</html>

OutputSuccess

Important Notes

Use flex-grow-0 to prevent an item from growing.

Use flex-shrink-0 to prevent an item from shrinking.

Tailwind's default flex-grow and flex-shrink classes use 1 as the value.

Summary

Flex grow controls how much an item grows to fill extra space.

Flex shrink controls how much an item shrinks when space is tight.

Tailwind makes it easy to set these with simple classes like flex-grow-1 or flex-shrink-0.