Flex Grow, Shrink and Wrap
Control how flex items size and wrap.
Syntax
class="flex-1 shrink-0 flex-wrap"Flex children can grow to fill space or shrink to fit.
flex-1— grow to share space equally.grow/grow-0— allow or block growing.shrink-0— stop an item from shrinking.flex-wrap— let items wrap to the next line.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer makes a search input fill all available horizontal space in a flex row using flex-1, with fixed-width buttons on either side.
- A sidebar is set to flex-none so it keeps a fixed width while the adjacent main area grows with flex-1.
- A tag list wraps onto multiple lines when there are too many tags using flex-wrap, preventing overflow.
More examples
flex-1 fill remaining space
flex-1 on the input makes it take all horizontal space not used by the fixed-size Filter and Go buttons.
<div class="flex gap-2">
<button class="bg-gray-200 px-3 py-2 rounded">Filter</button>
<input class="flex-1 border rounded px-3 py-2" placeholder="Search...">
<button class="bg-blue-600 text-white px-4 py-2 rounded">Go</button>
</div>Fixed sidebar with flex-none
flex-none prevents the sidebar from shrinking below its w-64 (16rem) width, while flex-1 on main claims all remaining space.
<div class="flex h-screen">
<aside class="flex-none w-64 bg-gray-900 text-white p-4">Sidebar</aside>
<main class="flex-1 overflow-auto p-8">Main content area</main>
</div>Wrapping flex row
flex-wrap allows the tag row to spill onto a new line when items exceed the container width, avoiding horizontal overflow.
<div class="flex flex-wrap gap-2">
<span class="bg-gray-100 px-3 py-1 rounded">React</span>
<span class="bg-gray-100 px-3 py-1 rounded">Tailwind</span>
<span class="bg-gray-100 px-3 py-1 rounded">TypeScript</span>
<span class="bg-gray-100 px-3 py-1 rounded">Node.js</span>
<span class="bg-gray-100 px-3 py-1 rounded">PostgreSQL</span>
</div>
Discussion