Flex grow and shrink in Tailwind - Performance & Optimization

Performance: Flex grow and shrink

MEDIUM IMPACT

This affects how flex items resize within a container, impacting layout recalculations and paint times during resizing or dynamic content changes.

Making flex items resize smoothly without causing layout thrashing

Tailwind

<div class="flex">
  <div class="flex-grow flex-shrink basis-64">Flexible base size item</div>
  <div class="flex-grow flex-shrink">Flexible item</div>
</div>

Using flex-basis with grow and shrink allows smoother resizing with fewer layout recalculations and stable layout.

📈 Performance GainSingle reflow on resize, reducing CLS and improving user experience.

Making flex items resize smoothly without causing layout thrashing

Tailwind

<div class="flex">
  <div class="flex-grow-0 flex-shrink-0 w-64">Fixed width item</div>
  <div class="flex-grow flex-shrink">Flexible item</div>
</div>

Using fixed width on one item with grow and shrink on another causes frequent reflows and layout shifts when container size changes.

📉 Performance CostTriggers multiple reflows on container resize, causing noticeable layout shifts (high CLS).

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fixed width with flex-grow/shrink mix	Low	Multiple on resize	High due to layout shifts	[X] Bad
Consistent flex-basis with grow and shrink	Low	Single on resize	Low, smooth resizing	[OK] Good

Rendering Pipeline

Flex grow and shrink affect the Layout stage by recalculating sizes of flex items when container size changes. This triggers Paint and Composite stages to update visuals.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout recalculation is most expensive due to resizing flex items dynamically.

Core Web Vital Affected

CLS

This affects how flex items resize within a container, impacting layout recalculations and paint times during resizing or dynamic content changes.

Optimization Tips

1Avoid mixing fixed widths with flex-grow and flex-shrink on sibling items.

2Use flex-basis to set a base size for flex items to stabilize layout.

3Test resizing behavior to ensure minimal layout recalculations and shifts.

Performance Quiz - 3 Questions

What is the main performance cost of using flex-grow and flex-shrink improperly?

A More network requests for CSS files

B Increased JavaScript execution time

C Frequent layout recalculations causing reflows

D Slower image decoding

DevTools: Performance

How to check: Record a performance profile while resizing the flex container or changing window size. Look for Layout and Recalculate Style events.

What to look for: Multiple Layout events indicate costly reflows; fewer Layout events mean better performance with flex grow/shrink usage.