Flexbox respects min-width and max-width constraints on flex items. These constraints limit how much a flex item can grow or shrink, regardless of flex-grow or flex-shrink values.

Key Points

1
min-width: Ensures a flex item does not shrink below a certain width, even if flex-shrink is set to allow shrinking.
2
max-width: Prevents a flex item from growing beyond a certain width, even if flex-grow allows expansion.
3
Flex items still distribute remaining space according to flex-grow and flex-shrink, but within the limits set by min-width and max-width.
4
These constraints are useful for maintaining readability and layout integrity on responsive designs.

Example: Flex Items with min-width and max-width

In this example, each flex item grows and shrinks to fill available space but will never be smaller than 100px or larger than 200px, preserving layout consistency.

Difficulty: 6/10

Topics: flex-basis, min-width conflict, max-width override

Scenario Questions

0-2 years experience

1
You're building a card component with a title and a short description. The title is long and wraps awkwardly on small screens. You set min-width: 200px on the card, but now it overflows the container. What’s likely happening, and how would you fix it?
2
I set max-width: 300px on a flex item expecting it to never get wider, but it’s still stretching across the whole row. What’s the most common mistake causing this?

2-5 years experience

1
Our responsive product grid breaks on tablets: some cards with long product names overflow their containers even though we set max-width. The flex container has display: flex and flex-wrap: wrap. What’s the root cause, and how would you fix it without breaking mobile layout?
2
A teammate says they set min-width: 250px on a flex item, but it’s still collapsing when the viewport shrinks. You check the code and see no overflow: hidden or width: 0. What other CSS property might be overriding min-width, and how would you diagnose it?

5-8 years experience

1
We have a dynamic sidebar with collapsible panels that use flexbox. When panels are collapsed, min-width causes layout jank on resize. When we remove min-width, content becomes unreadable on small screens. How would you design a resilient system that balances accessibility, performance, and layout stability across devices?
2
In a large-scale dashboard with 50+ flex-based widgets, users report inconsistent widths on high-DPI displays. Some widgets respect max-width, others don’t — even with identical CSS. What systemic issues could cause this, and how would you audit and fix them at scale?

8+ years experience

1
We’re migrating a legacy UI from float-based layouts to flexbox. Many components rely on hardcoded widths and min-width to prevent content overflow. How would you approach this migration without breaking existing user workflows or introducing performance regressions across 200+ pages?
2
Our design system uses flexbox with min-width and max-width for component consistency, but different teams are overriding these values inconsistently. How would you enforce layout boundaries at an architectural level — considering tooling, documentation, and developer experience — without stifling flexibility?

Follow-up Questions

❓What happens if you set min-width to 100% on a flex item inside a narrow container?
❓How would you debug a layout where max-width seems to be ignored?
❓When would you choose min-width over setting a fixed width in a flex container?