Explain flex-grow, flex-shrink, flex-basis and their interaction

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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?

ONE 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.

Source: developer.mozilla.org