Moderate CSS Question 72 of 229

What is flex-grow versus flex-shrink?

Frontend Master · Speak this in 60–90 seconds · Faridabad & Delhi NCR

Flex — one line

Grid — rows + cols

Flex-grow is how leftover space is shared

Why interviewers care about CSS:

They want a clean

contrast on CSS, not two memorised paragraphs.

Say what changes for

the developer, then one case where picking wrong hurts.

Stay structured

Name the idea, why it exists, then one short example.

Close cleanly

End with when you use it and one common pitfall.

Before you speak the answer, walk the interviewer through these steps:

1
Flex-grow is how leftover
space is shared
2
shrink is how children
give up space when the row is too tight.
3
Flex-basis is the starting
size before grow and shrink.
4
In interviews I walk
through a nav where the search box grows and icons stay fixed.
5
Common mistake
What juniors usually get wrong.
6
Close
When you pick this over the alternative.

Here's a short line you can speak, broken into clear beats:

Say this line

“Flex-basis is the starting size before grow and shrink.”

Break into beats

Flexbasisisthestartingsize

Speaking order

2987408337471632900

Note: Adapt this scaffold to your own project — keep it under 60–90 seconds.

Flex-grow is how leftover space is shared shrink is how children give up space when the row is too tight.