1
flex: 0 1 auto → flex-grow: 0, flex-shrink: 1, flex-basis: auto
- Item will not grow to fill extra space.
- Item can shrink if necessary to fit the container.
- Base size is determined by content (auto).
2
flex: 1 0 auto → flex-grow: 1, flex-shrink: 0, flex-basis: auto
- Item can grow to fill available space.
- Item will not shrink below its content size.
- Base size is determined by content (auto).

In short, flex: 0 1 auto prevents growth but allows shrinking, while flex: 1 0 auto allows growth but prevents shrinking.

Example: flex: 0 1 auto vs flex: 1 0 auto

In this example, the first item will maintain its content width and shrink if needed, while the second item will grow to fill remaining space but will not shrink below its content width.

Difficulty: 6/10

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

Scenario Questions

0-2 years experience

1
You're building a card layout with three items side by side. One item has a long title and the others are short. When the screen shrinks, the long title overflows. You try changing flex: 0 1 auto to flex: 1 0 auto — what changes, and why?
2
A button in your navbar is squishing too much on mobile. The CSS says flex: 0 1 auto. If you change it to flex: 1 0 auto, will it get bigger or stay the same? Why?

2-5 years experience

1
Our product page has a dynamic sidebar that sometimes collapses. When it does, the main content doesn’t expand to fill the space — even though it’s set to flex: 1 0 auto. What’s likely going wrong, and how would you debug it?
2
A designer complains that the hero section’s CTA button is too narrow on tablets. It’s using flex: 0 1 auto. You change it to flex: 1 0 auto and it works — but now on small screens, the button overflows the container. What tradeoff did you just make, and how would you fix it without breaking desktop?

5-8 years experience

1
We have a responsive dashboard with 8+ dynamic panels that can be reordered or hidden. Some panels use flex: 0 1 auto, others use flex: 1 0 auto. Users report inconsistent sizing when resizing the window — especially when panels are toggled. How would you audit and standardize this behavior across the system?
2
In our legacy component library, we’ve seen bugs where flex: 0 1 auto causes content to overflow on iOS Safari. Meanwhile, flex: 1 0 auto fixes it but breaks layout on Android. What underlying browser differences might explain this, and how would you design a cross-platform solution without adding media queries everywhere?

8+ years experience

1
Our design system has 30+ components using flex: 0 1 auto and flex: 1 0 auto inconsistently. We’re migrating to a new grid system, but legacy apps still rely on these values. How would you approach standardizing this at scale without breaking hundreds of pages?
2
We’re building a multi-tenant SaaS platform where layouts are customized per customer. Some tenants expect content to shrink aggressively (flex: 0 1 auto), others expect it to expand (flex: 1 0 auto). How would you architect a theming system that lets them configure this behavior declaratively, while keeping performance and maintainability intact?

Follow-up Questions

❓What happens if you set flex: 1 0 0 instead?
❓How would this behave inside a container with overflow: hidden?
❓Can you think of a layout where switching these two values breaks the UI?