Explain flex-grow, flex-shrink, flex-basis and their interaction
Tests deep understanding of flexbox sizing beyond keywords. A strong answer defines grow and shrink as ratios for distributing leftover or overflow space, basis as the starting size, and explains the two-step calculation.
What's really being asked
This question probes whether you understand the flexbox layout algorithm as a deterministic calculation or merely as a set of convenience keywords. Senior interviewers want to see that you can reason about how a flex container parcels out space after establishing each item's starting size, and how the shorthand syntax maps to those three values under the hood.
The full answer
First, flex-basis sets the starting size of the item before free space is distributed, behaving like a hypothetical width or height along the main axis. Second, flex-grow is a unitless ratio that controls how much of the container's remaining positive space the item receives when the total basis is less than the container; a value of 2 means it claims twice as much leftover space as a sibling with 1. Third, flex-shrink is a unitless ratio that controls how much the item surrenders space when the total basis exceeds the container; unlike grow, it factors in the basis itself so larger items shrink faster. Fourth, the interaction follows a strict sequence: compute basis, sum them, compare to container size, then distribute the deficit or surplus proportionally. Fifth, shorthand syntax matters: flex: 1 expands to 1 1 0% in browsers, flex: initial means 0 1 auto, and flex: none means 0 0 auto.
The mistakes people make
Treating flex: 1 as equivalent to width: 100% or an equal-width mandate. Claiming that flex-shrink simply divides overflow equally without weighting by basis. Stating that flex-basis is identical to width in all cases, ignoring that basis respects the flex direction and can be overridden by min and max constraints. Asserting that omitted values in the shorthand always default to their initial values regardless of context, when in fact a single unitless number sets grow and forces basis to 0%. Forgetting that negative grow or shrink values are invalid.
What usually comes next
How do min-width, max-width, and the intrinsic size of content interact with flex-basis? What happens when all items have flex-shrink: 0 and the container is too small? Why does flex: 1 sometimes produce different results than flex: 1 1 auto? Can you explain the difference between the specified, computed, and used values in this context?
A concrete example
Imagine a 500px flex container with two items. Item A has flex: 1 1 200px and Item B has flex: 2 1 100px. The total basis is 300px, leaving 200px of positive space. The grow factors are 1 and 2, so the space is split into three shares. Item A gets 200px plus one share of 66.7px, landing around 266.7px. Item B gets 100px plus two shares of 133.3px, landing around 233.3px. If the container shrank to 200px, the overflow would be 100px. The shrink factors weighted by basis give A a weight of 200 and B a weight of 100, so A surrenders two thirds of the overflow and B surrenders one third. A ends around 133.3px and B around 66.7px.
Interview question
When a flex container overflows because the sum of flex-basis values exceeds its width, how does the browser determine how much each item shrinks?
- a.Each item surrenders space in proportion to the product of its flex-shrink and flex-basis values.Correct
- b.The overflow is divided equally among all flex items regardless of their individual settings.
- c.The browser reduces the largest flex-basis item first until the overflow is eliminated.
- d.Each item surrenders space in proportion only to its flex-shrink value, treating all starting sizes the same.
Why? this is the answer
The flexbox algorithm weights each item's shrink factor by its flex-basis, so larger starting items surrender more of the overflow relative to their siblings. Option D is tempting because flex-grow distributes leftover space by ratio alone, but flex-shrink specifically factors in the starting size to determine how much each item gives up.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles