flex-grow shares out the free space
Row 1: nothing grows; 120px stays free. Row 2: 120px free, split 1:1:2, so +30, +30, +60. Row 3: the last basis is 120px, so only 40px is free: +10, +10, +20. A grow of 2 means twice the extra, not twice the width: in row 3 the last item is 140px, not twice 50.
Each flex item starts from its flex-basis; leftover space is shared out in proportion to flex-grow, and missing space is taken back in proportion to flex-shrink times the basis, never below the item's minimum size, which by default is its content width, hence the min-width: 0 fix.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a row with a 200px sidebar that never shrinks and a main area that takes all remaining space.
Make three buttons share a toolbar equally, whatever their labels.
In a chat list, each row has a 40px avatar and a .preview with a long last message. Make the message cut off with "…" on one line.
Explain it without notes
Explain flex-grow, flex-shrink and flex-basis in your own words.
What do flex: 1, flex: auto and flex: none expand to, and how do they differ?
How does the browser decide how many pixels each item loses when the items overflow?
Why does a flex: 1 column sometimes refuse to shrink, and how do you fix it?
Preview
Console
Nothing logged yet.Expected console output
none: 40 + 40 + 40 = 120
grow: 70 + 70 + 100 = 240
big: 50 + 50 + 140 = 240