Flex grow and shrink in Tailwind - Browser Rendering Trace

Render Flow - Flex grow and shrink

[Parse CSS classes] -> [Identify flex container] -> [Apply flex-grow and flex-shrink to flex items] -> [Calculate available space] -> [Distribute space among items] -> [Layout items accordingly] -> [Paint and Composite]

The browser reads the flex container and its children, applies flex-grow and flex-shrink properties to decide how items expand or shrink, then calculates and distributes space before painting the final layout.

Render Steps - 4 Steps

Code Added:<div class="flex w-full h-20 border"> ... </div>

Before

No boxes visible

→

After

[______________________________]
|                              |
|                              |
|                              |
|______________________________|

Adding the flex container creates a horizontal box with full width and fixed height with a border.

🔧 Browser Action:Creates flex formatting context and paints container box

Code Sample

A horizontal flex container with three items: the first grows to fill space, the second shrinks if needed, and the third keeps fixed width.

Tailwind

<div class="flex w-full h-20 border">
  <div class="flex-grow bg-blue-500">Item 1</div>
  <div class="flex-shrink bg-red-500 w-40">Item 2</div>
  <div class="bg-green-500 w-20">Item 3</div>
</div>

Render Quiz - 3 Questions

After step 2, what is the size behavior of the blue item?

A It grows to fill all available horizontal space

B It keeps a fixed width and does not grow

C It shrinks if container is too small

D It disappears from the layout

Common Confusions - 3 Topics

Why does my flex item grow even if I only set width?

If flex-grow is not zero, the item can grow beyond its width to fill space. Setting width sets base size but flex-grow controls expansion (see step 2).

💡 Width sets base size; flex-grow controls extra space filling.

Why does my flex item shrink smaller than its width?

By default, flex-shrink is 1, so items can shrink below their width if container is too small (see step 3). To prevent shrinking, set flex-shrink to 0.

💡 flex-shrink:1 allows shrinking; flex-shrink:0 prevents it.

Why doesn't my item grow when I want it to?

If flex-grow is zero or not set, the item won't grow even if space is available (see step 4 where no grow is set). You must explicitly set flex-grow to a positive value.

💡 Set flex-grow > 0 to make items grow.

Property Reference

Property	Value Applied	Effect on Item Size	Common Use
flex-grow	0 (default)	Item does not grow beyond its base size	Keep item size fixed or shrink only
flex-grow	1	Item grows to fill available space	Make item expand to fill container
flex-shrink	1 (default)	Item shrinks if container is too small	Allow item to shrink to avoid overflow
flex-shrink	0	Item does not shrink below base size	Prevent item from shrinking
width	fixed value (e.g., w-40)	Sets base size of item	Control item size explicitly

Concept Snapshot

flex-grow controls how much a flex item expands to fill space (default 0). flex-shrink controls if an item can shrink when container is small (default 1). Width sets the base size of an item. Items with flex-grow:1 grow; with flex-shrink:1 shrink if needed. Without flex-grow, items keep their base width. Use Tailwind classes flex-grow, flex-shrink, and width (w-*) to control sizes.