Detailed explanation
flex-grow, flex-shrink, and flex-basis control how flex items share space along their container’s main axis. With flex-direction: row, this usually means width; with column, it means height. These properties apply to flex items, not the flex container. They matter when building layouts that must adapt to available space without assigning rigid dimensions everywhere. Their initial values are 0, 1, and auto, respectively, so an item does not grow by default but can shrink when necessary.
flex-basis establishes an item’s starting main-axis size before flexible space is distributed. A definite value such as 250px supplies that starting size instead of using the corresponding width or height as the basis. With auto, the browser uses the main-axis width or height when specified; otherwise, sizing is content-based. The basis is not necessarily the final rendered size: growth, shrinking, minimum and maximum constraints, and box sizing can affect the result. In particular, the default automatic minimum size can prevent an item from becoming narrower than its content permits.
flex-grow distributes positive free space in proportion to growth factors. If two items have bases of 100px each in a 500px container, with no gaps or margins, 300px remains. Growth factors of 1 and 2 allocate 100px and 200px extra, producing sizes of 200px and 300px. Thus, grow factors describe shares of extra space, not proportions of final sizes. flex-shrink handles negative free space using each item’s shrink factor multiplied by its flex base size. Consequently, equally shrinkable items with different bases generally lose different numbers of pixels. The browser also respects size constraints and redistributes space when items reach those limits.
The flex shorthand combines these properties in the order grow, shrink, basis. In a row layout, .sidebar { flex: 0 0 250px; } requests a 250px basis without growing or shrinking, while .main { flex: 1 1 auto; } can expand or contract from its initial size. Adding min-width: 0 to the main item may be necessary for long content to shrink within the layout. Interviewers look for this practical understanding, especially the difference between growth ratios and weighted shrinking.
Key points to remember
- All three properties control flex items along the main axis.
- flex-basis sets the starting size, not a guaranteed final size.
- flex-grow allocates positive free space relative to sibling growth factors.
- flex-shrink distributes space reduction using shrink factor × flex base size.
- flex: 0 1 auto is the initial behaviour; the shorthand order is grow, shrink, basis.
Common mistakes candidates make
- Assuming flex-grow: 2 makes an item twice as wide as an item with flex-grow: 1.
- Assuming equal flex-shrink values remove equal pixel amounts regardless of initial sizes.
- Ignoring automatic minimum sizes and expecting flex-shrink alone to prevent content overflow.
Likely follow-up questions
What is the difference between flex: 1 and flex: auto?
Browsers expand flex: 1 to 1 1 0%, while flex: auto means 1 1 auto. The former generally distributes space from a zero basis, whereas the latter starts from the main-axis dimension or content size; a percentage basis can behave differently when the container’s main size is indefinite.
Why does a flex item still overflow with flex-shrink: 1?
Its automatic minimum size may prevent it from shrinking enough, especially with long unbroken content. Use min-width: 0 in a row layout or min-height: 0 in a column layout when appropriate, and handle content wrapping or overflow separately.
How does weighted shrinking work numerically?
Suppose two items have bases of 200px and 100px, both with flex-shrink: 1, and must lose 60px overall. Without limiting constraints, they lose 40px and 20px respectively because their scaled shrink factors are in a 2:1 ratio.
Interview tip: Explain the starting size, extra-space distribution, and shortage handling in that order, then demonstrate them with the sidebar-and-main layout.