1
flex-grow: Determines how much a flex item can grow relative to other items when there is extra space. A value of 0 means the item will not grow.
2
flex-shrink: Determines how much a flex item can shrink relative to other items when space is limited. A value of 1 means the item can shrink if needed.
3
flex-basis: Sets the initial main size of the item before distributing space. It can be a length, percentage, or auto (default), which uses the item's content size.

Example: Individual flex Properties

In this example, Item 2 grows faster than Items 1 and 3 due to a higher flex-grow. Item 3 can shrink more than others because of a higher flex-shrink. Each item starts with its specified flex-basis as the initial size.

Difficulty: 6/10

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

Scenario Questions

0-2 years experience

1
You have a flex container with three items: one with flex: 1, another with flex: 2, and a third with flex: 0. If the container is 600px wide and each item’s content is 100px, how wide will each item be? Walk me through your reasoning.
2
If I set flex-basis: 200px on an item but the container is only 300px wide with two other items, what happens? What if I also set flex-shrink: 0?
3
I have a row of buttons in a flex container, and one button is way wider than the others even though they all have the same flex: 1. What’s the most likely cause?

2-5 years experience

1
Our mobile nav bar has three items that collapse weirdly on small screens — one gets squished to 0px while others stay readable. I set flex: 1 on all, but it’s still breaking. What could be going wrong, and how would you fix it?
2
A card component with dynamic content is overflowing its container on desktop but looks fine on mobile. The parent uses flexbox. How would you diagnose whether flex-grow, flex-shrink, or flex-basis is the culprit?
3
We’re building a responsive dashboard with a sidebar and main content area. The sidebar should be 250px wide on desktop but shrink to 80px on tablet. How would you use flex properties to make this work without media queries for sizing?

5-8 years experience

1
We have a legacy layout using flexbox for a multi-column form that breaks unpredictably when dynamic form fields are added. Users report some inputs disappearing or overflowing. How would you audit and redesign this to be robust across content variations and screen sizes?
2
A component library uses flexbox for card grids, but performance degrades on low-end devices when content is long. How might flex-shrink and flex-basis contribute to layout thrashing, and what optimizations would you propose?
3
We’re migrating from float-based layouts to flexbox for a high-traffic e-commerce product grid. Some product cards have variable-height images and titles. How do you ensure consistent baseline alignment and avoid layout shifts without hard-coding heights?

8+ years experience

1
Our design system uses flexbox for all layout primitives, but we’re seeing inconsistent behavior across teams due to implicit defaults. How would you enforce consistent flex behavior at the architecture level without over-constraining designers?
2
We’re considering replacing flexbox with CSS Grid for our main layout system due to scalability concerns. What are the long-term maintenance tradeoffs between flexbox (with complex flex-grow/shrink rules) and grid for a global component library used by 50+ engineers?
3
Legacy codebase has hundreds of flex containers with mixed flex: 1, flex: auto, and inline styles. We need to refactor for accessibility and performance. How would you prioritize which flex properties to standardize first, and how would you measure success?

Follow-up Questions

❓What happens if you set flex-basis to auto instead of a fixed value?
❓How would you debug a layout where items are shrinking unexpectedly despite having flex-grow set?
❓Why might flex-shrink: 0 not work as expected on a child with a min-width?