The flex shorthand property allows you to control the growth, shrinkage, and base size of flex items. flex: 1 and flex: auto are common shorthand values but differ in how they treat the base size of items.

Key Differences

1
flex: 1 → Equivalent to flex: 1 1 0;. The item grows to fill available space, can shrink if needed, and starts from a base size of 0.
2
flex: auto → Equivalent to flex: 1 1 auto;. The item grows and shrinks like flex: 1, but its base size is its content's intrinsic size (auto).

Essentially, flex: 1 ignores the content size initially, distributing all extra space equally, whereas flex: auto respects the intrinsic size of the item before distributing remaining space.

Example: flex: 1 vs flex: auto

Difficulty: 6/10

Topics: flex-grow, flex-basis, flex-shrink

Scenario Questions

0-2 years experience

1
You have two side-by-side divs inside a flex container — one has a short label, the other has a long paragraph. If you set both to flex: 1, how will they size? What if you change one to flex: auto?
2
A junior dev set flex: auto on a button inside a flex row, and now it’s way wider than expected. How would you explain why that happened?
3
If you have a flex container with three items and only one has flex: 1 while the others have no flex, what happens when the container shrinks?

2-5 years experience

1
We have a header with a logo, title, and button — the title should take up remaining space, but when the screen is narrow, the button wraps. We tried flex: 1 on the title, but it didn’t help. What’s likely wrong, and how would you fix it?
2
A card component uses flex: auto on its description text, but on mobile, the text overflows the container. Why does this happen, and what’s a better approach?
3
Our dashboard has two panels side-by-side. One uses flex: 1, the other flex: auto. On some devices, the auto one becomes too narrow. How would you investigate and resolve this inconsistency?

5-8 years experience

1
We’re building a responsive form layout where inputs need to expand intelligently. Some fields have placeholder text, others have long default values. When should we use flex: 1 vs. flex: auto, and what edge cases break each approach?
2
A legacy component uses flex: auto on dynamic content, causing layout thrashing on low-end devices. How would you optimize this without breaking existing layouts?
3
In a complex grid of cards, we noticed inconsistent sizing between flex: 1 and flex: auto elements when nested inside scrollable containers. What underlying CSS layout mechanics are at play, and how would you design a robust solution?

8+ years experience

1
We’re migrating a legacy UI framework that uses flex: auto everywhere for dynamic content. The team wants to standardize on flex: 1 for performance and predictability. What are the architectural risks, and how would you plan a phased rollout without breaking 50+ components?
2
Our design system has two flex-based layout primitives: one for ‘expandable content’ and one for ‘content-aware sizing’. How would you define their contracts, and when would you choose one over the other at the system level?
3
A cross-team component library uses flex: auto in shared base styles, but product teams report inconsistent behavior across browsers. How would you architect a solution that enforces predictable behavior at scale, and what metrics would you track to validate success?

Follow-up Questions

❓What happens if you have two children with flex: 1 and one has a lot of text?
❓Why might flex: auto cause unexpected overflow in a scrollable container?
❓How would you debug a layout where flex: 1 isn’t behaving like you expected?