Flex Grow

Controls the ability of a flex item to grow when there is extra space in the flex container. This utility helps distribute available space proportionally between flex items. Items with higher grow values receive a larger portion of the available space. In Tailwind v4, flex-grow utilities work better with other layout features and responsive variants.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="flex gap-4">
  <div class="grow-0 p-4 w-20 bg-blue-100">Not growing</div>
  <div class="grow p-4 bg-blue-300">Growing to fill available space</div>
  <div class="grow-0 p-4 w-20 bg-blue-100">Not growing</div>
</div>

Examples

Basic contrast between grow and grow-0 items

<div class="flex gap-4">
  <div class="grow-0 p-4 w-20 bg-blue-100">Not growing</div>
  <div class="grow p-4 bg-blue-300">Growing to fill available space</div>
  <div class="grow-0 p-4 w-20 bg-blue-100">Not growing</div>
</div>

Edit in playground

Using arbitrary values to distribute space proportionally

<div class="flex gap-4">
  <div class="grow p-4 bg-blue-100">Grow: 1</div>
  <div class="grow-[2] p-4 bg-blue-300">Grow: 2 (gets 2x the extra space)</div>
  <div class="grow p-4 bg-blue-100">Grow: 1</div>
</div>

Edit in playground

Common page layout with sticky footer using flex-grow

<!-- App layout with header, main, and footer -->
<div class="flex flex-col min-h-screen">
  <!-- Header - doesn't grow -->
  <header class="grow-0 shrink-0 bg-blue-600 text-white p-4">
    <h1 class="text-xl font-bold">App Title</h1>
  </header>
  
  <!-- Main content - grows to fill available space -->
  <main class="grow p-6 overflow-auto">
    <h2 class="text-xl font-bold mb-4">Main Content</h2>
    <p class="mb-4">This area will grow to push the footer to the bottom of the viewport, even when content is short.</p>
    <p>The header and footer remain at fixed heights.</p>
  </main>
  
  <!-- Footer - doesn't grow -->
  <footer class="grow-0 shrink-0 bg-gray-200 p-4 text-center">
    <p>&copy; 2025 Example Company</p>
  </footer>
</div>

Edit in playground

Card with fixed header/footer and flexible content area

<!-- Card with flexible header and footer -->
<div class="flex flex-col h-80 w-64 bg-white rounded-lg shadow-md overflow-hidden">
  <!-- Card header - fixed height -->
  <div class="grow-0 shrink-0 bg-blue-500 text-white p-4">
    <h3 class="font-bold">Card Title</h3>
  </div>
  
  <!-- Card content - grows to fill available space -->
  <div class="grow overflow-auto p-4">
    <p class="text-sm">This content area grows to fill the available space between the header and footer.</p>
    <p class="text-sm mt-2">It will scroll if the content is too long to fit.</p>
    <p class="text-sm mt-2">Additional content...</p>
    <p class="text-sm mt-2">More content...</p>
  </div>
  
  <!-- Card footer - fixed height -->
  <div class="grow-0 shrink-0 bg-gray-100 p-3 border-t flex justify-end">
    <button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600">Action</button>
  </div>
</div>

Edit in playground

Live Preview

Try the Flex Grow utility with different values

Open Interactive Playground

Variants

grow-0: item doesn't grow (flex-grow: 0), grow: item can grow to take up available space (flex-grow: 1); arbitrary values can be specified using square bracket notation, e.g., grow-[2]