Flex grow controls how much a flex item should expand to fill available space. Combined with flex shrink and flex basis, these utilities give you precise control over how items distribute space in a flex container.
Flex grow
Use flex-grow to make an item expand and fill remaining space.
<div class="flex">
<div class="flex-none w-32 bg-blue-100 p-4">Fixed width</div>
<div class="flex-grow bg-blue-200 p-4">Takes remaining space</div>
</div>
<div class="flex">
<div class="flex-grow bg-red-100 p-4">Grows twice as much</div>
<div class="flex-grow bg-red-200 p-4">Grows normally</div>
<div class="flex-grow bg-red-300 p-4">Grows normally</div>
</div>
Flex shrink
Flex shrink controls how items contract when the container is too small. Items shrink proportionally by default — flex-shrink-0 prevents shrinking.
<div class="flex overflow-hidden">
<div class="flex-shrink-0 w-48 bg-green-100 p-4">Never shrinks</div>
<div class="bg-green-200 p-4">Shrinks to fit</div>
</div>
Flex basis
Flex basis sets the initial size of a flex item before growing or shrinking.
<div class="flex">
<div class="flex-basis-1/3 bg-purple-100 p-4">Starts at 1/3 width</div>
<div class="flex-basis-2/3 bg-purple-200 p-4">Starts at 2/3 width</div>
</div>
Sidebar layout
A common layout pattern uses flex grow and shrink to create a fixed sidebar with a flexible main content area.
<div class="flex min-h-screen">
<aside class="flex-shrink-0 w-64 bg-gray-800 text-white p-6">
Sidebar — fixed width
</aside>
<main class="flex-grow p-8">
Main content — takes remaining space
</main>
</div>