flex-shrink is weighted by the basis
Equal bases lose equal amounts (40px each). Bases 200 and 100 lose 40 and 20, in the ratio 200:100, so the bar keeps its proportions. With flex-shrink: 0 on the first item, the second item gives up the whole 60px.
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
equal: 80, 80, 80
weighted: 160, 80
keep: 200, 40