flex: none, flex: auto and flex: 1
The contents are 20px and 100px wide. none keeps the content sizes. auto starts from them and shares the 120px of free space equally (+60 each). 1 starts both at 0 and shares all 240px, so the columns are equal.
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
flex: none -> 20, 100
flex: auto -> 80, 160
flex: 1 -> 120, 120