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.

Practice

1. What does the Tailwind class flex-grow-0 do to a flex item?

easy

A. Prevents the item from growing to fill extra space

B. Makes the item grow to fill all extra space

C. Prevents the item from shrinking when space is tight

D. Makes the item shrink faster than others

Solution

1. Step 1: Understand flex-grow property

   The flex-grow property controls how much a flex item can grow relative to others when extra space is available.

2. Step 2: Interpret the class flex-grow-0

   The class flex-grow-0 sets flex-grow to 0, meaning the item will not grow to fill extra space.

3. Final Answer:

   Prevents the item from growing to fill extra space -> Option A

4. Quick Check:

   flex-grow-0 means no growth [OK]

Hint: flex-grow-0 means no growth, flex-grow-1 means grow [OK]

Common Mistakes:

• Confusing grow with shrink
• Thinking flex-grow-0 allows growth
• Mixing flex-grow with flex-shrink

2. Which Tailwind class correctly prevents a flex item from shrinking?

easy

A. flex-grow-1

B. flex-grow-0

C. flex-shrink-1

D. flex-shrink-0

Solution

1. Step 1: Understand flex-shrink property

   The flex-shrink property controls how much a flex item shrinks when space is limited.

2. Step 2: Identify the class that disables shrinking

   The class flex-shrink-0 sets flex-shrink to 0, preventing the item from shrinking.

3. Final Answer:

   flex-shrink-0 -> Option D

4. Quick Check:

   flex-shrink-0 means no shrinking [OK]

Hint: Use flex-shrink-0 to stop shrinking, flex-shrink-1 to allow [OK]

Common Mistakes:

• Choosing flex-grow classes instead of flex-shrink
• Assuming flex-shrink-1 prevents shrinking
• Mixing grow and shrink properties

3. Given this HTML snippet:

<div class="flex w-64">
  <div class="flex-grow-0 w-16 bg-blue-500">A</div>
  <div class="flex-grow w-32 bg-red-500">B</div>
</div>

What will happen to the widths of the two divs inside the flex container?

medium

A. A shrinks, B stays fixed at 32 width

B. A stays 16 width, B grows to fill remaining space

C. Both A and B grow equally to fill space

D. A grows, B shrinks to 16 width

Solution

1. Step 1: Analyze flex-grow classes

   Div A has flex-grow-0 so it won't grow beyond its width 16. Div B has flex-grow (equivalent to flex-grow-1) so it will grow to fill leftover space.

2. Step 2: Understand container width and item widths

   The container is 64 width. A uses 16 width fixed, B starts at 32 but grows to fill remaining space (64 - 16 = 48 or more if allowed).

3. Final Answer:

   A stays 16 width, B grows to fill remaining space -> Option B

4. Quick Check:

   flex-grow-0 no grow, flex-grow fills space [OK]

Hint: flex-grow-0 fixes size, flex-grow fills leftover space [OK]

Common Mistakes:

• Assuming flex-grow-0 items grow
• Thinking both grow equally without flex-grow class
• Ignoring container width limits

4. You have this code:

<div class="flex w-40">
  <div class="flex-shrink-0 w-24 bg-green-400">X</div>
  <div class="flex-shrink w-24 bg-yellow-400">Y</div>
</div>

But the second div overflows the container. What is the problem?

medium

A. flex-shrink on second div prevents shrinking, causing overflow

B. w-24 is too small for both divs, causing overflow

C. flex-shrink-0 on first div prevents it from shrinking, causing overflow

D. Missing flex-grow classes causes overflow

Solution

1. Step 1: Check widths and container size

   Container width is 40. Both divs have width 24, total 48, which is more than container.

2. Step 2: Analyze flex-shrink classes

   First div has flex-shrink-0, so it cannot shrink below 24. Second div has default shrink, so it tries to shrink but can't reduce enough to fit container.

3. Final Answer:

   flex-shrink-0 on first div prevents it from shrinking, causing overflow -> Option C

4. Quick Check:

   flex-shrink-0 stops shrinking, causes overflow [OK]

Hint: flex-shrink-0 stops shrinking, watch container overflow [OK]

Common Mistakes:

• Thinking flex-shrink on second div causes overflow
• Ignoring container width limits
• Assuming flex-grow affects shrinking

5. You want three flex items inside a container to share leftover space proportionally: the first twice as much as the second, and the third does not grow. Which Tailwind classes should you use?

hard

A. First: flex-grow-2, Second: flex-grow-1, Third: flex-grow-0

B. First: flex-grow, Second: flex-grow-2, Third: flex-grow-0

C. First: flex-grow-1, Second: flex-grow-2, Third: flex-grow-0

D. First: flex-grow-0, Second: flex-grow-1, Third: flex-grow-2

Solution

1. Step 1: Understand proportional growth with flex-grow

   Flex-grow values determine how leftover space is divided. A value of 2 means twice the space compared to 1.

2. Step 2: Assign classes to match proportions

   First item needs flex-grow-2, second flex-grow-1, third flex-grow-0 to not grow.

3. Final Answer:

   First: flex-grow-2, Second: flex-grow-1, Third: flex-grow-0 -> Option A

4. Quick Check:

   flex-grow values set proportional growth [OK]

Hint: Use flex-grow numbers to set proportional growth [OK]

Common Mistakes:

• Using wrong grow numbers or order
• Assigning flex-grow-0 to growing items
• Confusing grow with shrink classes