Both flex: 1 and flex: auto are commonly used shorthand values for the flex property, but they behave slightly differently due to their underlying flex-grow, flex-shrink, and flex-basis values.

Comparison

1
flex: 1 → Equivalent to flex: 1 1 0;. The item will grow to fill available space, can shrink if necessary, and starts with a base size of 0.
2
flex: auto → Equivalent to flex: 1 1 auto;. The item will grow and shrink like flex: 1, but its base size is determined by its content (auto) instead of 0.

In short, flex: 1 treats the item as starting from zero width/height and distributes space, whereas flex: auto respects the item's intrinsic size 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. Both have flex: 1. What happens if you change one to flex: auto? Describe the visual difference.
2
A junior developer set flex: auto on a button inside a header and now it’s way wider than expected. How would you explain why flex: 1 would fix it?

2-5 years experience

1
Our card component has a title and a description — both flex: 1 — but on mobile, the description overflows the container. Switching to flex: auto fixes it, but breaks desktop layout. How do you solve this without media queries?
2
A feature uses flex: auto on a dynamic list item, and sometimes the item collapses to zero height when content is empty. Why does this happen, and how would you debug it?

5-8 years experience

1
We’re building a responsive dashboard with 3 panels that should evenly split space on desktop but stack on mobile. Some panels have dynamic content — using flex: 1 causes layout jank on load. How would you optimize this without sacrificing responsiveness?
2
A legacy component uses flex: auto on inputs inside a form row. When we added internationalization, some labels became too long and broke the layout. Why did flex: auto make this worse than flex: 1, and how would you redesign it for scalability?

8+ years experience

1
Our design system has a flex-based grid component used across 20+ products. Some teams use flex: 1, others use flex: auto — causing inconsistent behavior in edge cases like zero-height content or RTL layouts. How would you standardize this at the architecture level?
2
We’re migrating from a float-based layout to flexbox. Legacy code uses flex: auto in dozens of places, and we’re seeing performance regressions on low-end devices. What’s the root cause, and how do you prioritize and phase the fix across teams?

Follow-up Questions

❓What happens if you replace flex: 1 with flex: auto on a container with dynamic text content?
❓How would you debug a layout where two flex items behave differently despite both having flex: 1?
❓Why might flex: auto cause overflow in a narrow column but flex: 1 wouldn’t?