In Flexbox, items can shrink by default if the container is smaller than the combined size of its items. To prevent a flex item from shrinking, you can set its flex-shrink property to 0.

Key Points

1
flex-shrink: 0: Ensures the flex item does not shrink even when there is insufficient space in the container.
2
flex: 1 0 auto: A shorthand that allows the item to grow but prevents it from shrinking (flex-grow: 1, flex-shrink: 0, flex-basis: auto).
3
Use in combination with flex-basis to control the initial size while preventing shrinking.
4
This is useful for maintaining minimum readability, fixed-size components, or certain layout constraints in responsive designs.

Example: Prevent Flex Item Shrinking

In this example, item1 will maintain its size and not shrink even if the container is too small, whereas item2 will shrink to fit the available space.

Difficulty: 3/10

Topics: flex-shrink, flex-basis, min-width

Scenario Questions

0-2 years experience

1
You're building a card layout with a title and a button, but the button keeps shrinking on small screens. How would you fix it using flex properties?
2
A flex container has three items: one with text, one with an icon, and one with a button. The button keeps getting squished. What CSS property would you change to stop that?
3
If you set width: 100px on a flex item but it still shrinks, what’s the first thing you’d check and why?

2-5 years experience

1
A responsive navigation bar breaks on mobile: the logo shrinks too much even though we set flex-shrink: 0. What could be causing this, and how would you debug it?
2
We have a dashboard with collapsible panels. One panel’s content overflows when shrunk, even after setting flex-shrink: 0. What other CSS properties might be involved, and how would you fix it?
3
A team member says 'flex-shrink: 0 fixed my layout' but now the page is horizontally scrollable on tablets. What’s likely wrong, and how would you resolve it without breaking mobile?

5-8 years experience

1
You’re designing a dynamic form builder where users can add fields of varying content lengths. How would you ensure fields don’t shrink unpredictably across devices without hardcoding widths?
2
In a high-traffic e-commerce product grid, flex items are shrinking inconsistently on older Android browsers. What’s your strategy to ensure layout stability without sacrificing performance?
3
We have a legacy component that uses flexbox for a toolbar, but it breaks when internationalized text is longer. How would you redesign it to be robust across languages without relying on fixed sizes?

8+ years experience

1
We’re migrating a legacy UI from floats to flexbox, but many components break due to uncontrolled shrinking. How would you architect a design system rule to enforce non-shrinking behavior consistently across teams?
2
A cross-team component library has inconsistent flex behavior — some teams use flex-shrink: 0, others use min-width, others use overflow: hidden. How would you standardize this at the architecture level to avoid layout thrash and maintenance debt?
3
In a large-scale design system, how do you balance the need for flexible layouts with the risk of content overflow or horizontal scrolling when preventing shrink? What metrics or testing strategies would you implement to enforce this at scale?

Follow-up Questions

❓What happens if you set flex-shrink: 0 but don’t set a min-width?
❓How would you debug a flex item that still shrinks even after setting flex-shrink: 0?
❓When would you choose flex-shrink: 0 over setting a fixed width?