Flex Grow

Utilities for controlling how flex items grow.

Class reference

Class Properties
.flex-grow flex-grow: 1;
.flex-grow-0 flex-grow: 0;

Grow

Use .flex-grow to allow a flex item to grow to fill any available space:

Content that cannot flex
Item that will grow
Content that cannot flex
<div class="flex bg-gray-200">
  <div class="flex-none text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Content that cannot flex
  </div>
  <div class="flex-grow text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">
    Item that will grow
  </div>
  <div class="flex-none text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Content that cannot flex
  </div>
</div>

Don't grow

Use .flex-grow-0 to prevent a flex item from growing:

Will grow
Will not grow
Will grow
<div class="flex bg-gray-200">
  <div class="flex-grow text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Will grow
  </div>
  <div class="flex-grow-0 text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">
    Will not grow
  </div>
  <div class="flex-grow text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Will grow
  </div>
</div>

Responsive

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

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed

Customizing

Grow Values

By default Tailwind provides two flex-grow utilities. You change, add, or remove these by editing the theme.flexGrow section of your Tailwind config.

// tailwind.config.js
module.exports = {
theme: {
flexGrow: {
      '0': 0,
-     default: 1,
+     default: 2,
+     '1': 1,
}
}
}

Responsive and pseudo-class variants

By default, only responsive variants are generated for flex grow utilities.

You can control which variants are generated for the flex grow utilities by modifying the flexGrow property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

// tailwind.config.js
module.exports = {
variants: {
    // ...
-   flexGrow: ['responsive'],
+   flexGrow: ['responsive', 'hover', 'focus'],
}
}

Disabling

If you don't plan to use the flex grow utilities in your project, you can disable them entirely by setting the flexGrow property to false in the corePlugins section of your config file:

// tailwind.config.js
module.exports = {
corePlugins: {
    // ...
+   flexGrow: false,
}
}