Tailwind Flex Grow

The flex-grow utility class in Tailwind CSS lets you control how flex items grow relative to the rest of the flex container. This is especially useful when designing flexible layouts that adapt to different screen sizes and content.

How to apply Tailwind Flex Grow

To apply tailwind flex grow to a flex item, you can use the flex-grow-{value} utility class, where {value} represents the desired growth factor. The {value} can range from 0 to a positive integer, determining the proportion of available space the flex item should occupy.

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

Preview

Responsive Tailwind Flex Grow

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

<div class="flex">
	<div class="flex-grow md:flex-grow-0">Item 1</div>
	<div class="flex-grow md:flex-grow">Item 2</div>
	<div class="flex-grow-2 md:flex-grow-4">Item 3</div>
</div>

Preview

In the above example, the flex grow behavior of the items is modified based on the breakpoints. The first item has a flex grow value of 0 by default, but starting from the medium breakpoint and above (md:flex-grow-0), it does not grow. The second item has a flex grow value of 1 by default, but starting from the medium breakpoint and above (md:flex-grow), it grows. The third item has a flex grow value of 2 by default, but starting from the medium breakpoint and above (md:flex-grow-4), it grows at a higher rate.

Interaction State Use (hover/focus)

Tailwind doesn't include hover/focus variants for flex-grow by default, but you can add them:

Enable in tailwind.config.js:

// tailwind.config.js
module.exports = {
	variants: {
		extend: {
			flexGrow: ["hover", "focus"],
		},
	},
};

Use It:

<div class="flex gap-4">
	<div class="grow bg-gray-200 hover:grow-0 transition-all duration-300">
		Hover to stop growing
	</div>
	<div class="bg-blue-200">Static</div>
</div>

Preview

Arbitrary Value Usage

You can apply any custom grow value inline with Tailwind’s square bracket syntax:

<div class="flex">
	<div class="[flex-grow:3] bg-green-300 p-4">Grow 3x</div>
	<div class="[flex-grow:1] bg-gray-300 p-4">Grow 1x</div>
</div>

Preview

This lets you go beyond the predefined options.

Customization in tailwind.config.js

You can extend flexGrow with custom values:

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			flexGrow: {
				2: "2",
				3: "3",
			},
		},
	},
};

Then use it like:

<div class="flex">
	<div class="grow-2 bg-red-500 p-4 text-white">Grows twice as much</div>
	<div class="grow bg-gray-400 p-4">Normal grow</div>
</div>

Preview

Real UI Component Example – Dashboard Sidebar Layout

<div class="flex h-screen">
	<!-- Sidebar -->
	<aside class="w-64 bg-gray-800 text-white p-4">Sidebar</aside>

	<!-- Main Content -->
	<main class="grow bg-white p-6 overflow-auto">
		<h1 class="text-2xl font-bold mb-4">Dashboard</h1>
		<p>This area expands automatically.</p>
	</main>
</div>

Preview

✅ grow on <main> makes it take up the remaining width beside the fixed sidebar.

Chat App Layout

Imagine a simple web chat UI — sidebar with contacts on the left, chat messages on the right. The chat area should expand and take up all remaining space.

🧱 Layout Structure

<div class="flex h-screen">
	<!-- Sidebar -->
	<aside class="w-72 bg-gray-900 text-white p-4">
		<h2 class="text-xl font-semibold mb-4">Contacts</h2>
		<ul class="space-y-2">
			<li class="hover:bg-gray-700 p-2 rounded">Alice</li>
			<li class="hover:bg-gray-700 p-2 rounded">Bob</li>
			<li class="hover:bg-gray-700 p-2 rounded">Charlie</li>
		</ul>
	</aside>

	<!-- Chat Area -->
	<main class="grow bg-white flex flex-col">
		<!-- Chat Header -->
		<header class="p-4 border-b font-semibold">Chat with Alice</header>

		<!-- Chat Messages (Scrollable) -->
		<section class="grow overflow-y-auto p-4 space-y-2">
			<div class="bg-gray-100 p-2 rounded max-w-xs">Hi there!</div>
			<div class="bg-blue-100 p-2 rounded max-w-xs self-end">Hey 👋</div>
			<div class="bg-gray-100 p-2 rounded max-w-xs">How are you?</div>
		</section>

		<!-- Input Area -->
		<footer class="p-4 border-t">
			<input
				type="text"
				class="w-full border rounded px-3 py-2 focus:outline-none focus:ring"
				placeholder="Type a message..."
			/>
		</footer>
	</main>
</div>

Preview

Tailwind Flex Grow Class Table

When to Use Tailwind CSS Flex Grow

Use flex-grow when:

• You want one element to fill remaining space in a flex container.

• You’re building responsive UIs that adapt to various screen sizes.

• You need dynamic layouts without complex CSS rules.

Avoid it when:

• Fixed widths are required for precise layout control.

• Content shouldn’t stretch.

✨ What's Next?

You can also check out other similar tailwind utility classes

• Tailwind CSS Shrink

• Tailwind CSS Wrap

Windframe Tailwind blocks

footer