The min-width: 0 gotcha
In row 1 the flex: 1 column can't go below its min-content width (300px), so it pokes 120px out of the dashed container. With min-width: 0 it takes its fair share: 240 - 60 = 180px. Row 3 is the same fix used to truncate a long file name with "…". getComputedStyle reports auto for the default.
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
without min-width: 0 -> 300
with min-width: 0 -> 180
min-width values: auto and 0px