When a flex container has align-items: stretch, all flex items are stretched to fill the container along the cross axis by default. This makes items expand to match the height (for row direction) or width (for column direction) of the container, unless a fixed size or min/max constraints are applied.

Key Points

1
Default behavior: Flex items stretch to fill the container along the cross axis.
2
Overridden by fixed sizes: If a flex item has a specific height (row) or width (column), the fixed size takes precedence over stretching.
3
Respecting min/max: min-height, max-height, min-width, and max-width limit the stretching of flex items.
4
Works for all items unless align-self is used on individual items to override the container's align-items.

Example: align-items: stretch

In this example, Item 1 and Item 3 stretch to fill the 200px container height, while Item 2 maintains its fixed height of 100px.

Difficulty: 3/10

Topics: flexbox alignment, default behavior, container constraints

Scenario Questions

0-2 years experience

1
You have a flex container with three divs inside, all with different text lengths, but they’re not the same height — what’s the most likely reason, and how do you fix it?
2
If I set align-items: stretch on a flex container and none of the children have explicit height, what happens to their heights?
3
I added a padding to one flex item and now it’s taller than the others — why isn’t stretch making them equal?

2-5 years experience

1
Our card grid uses flexbox with align-items: stretch, but on mobile, one card’s image is cutting off content — what’s probably going wrong, and how do you debug it?
2
A designer says the buttons in our nav bar aren’t aligned properly — they’re all stretch-height, but one is taller. What three things would you check in DevTools?
3
We have a responsive sidebar with flex items that stretch vertically, but on tablets, the content overflows. How do you fix this without breaking desktop layout?

5-8 years experience

1
We’re building a dynamic dashboard with variable-height widgets in a flex container — stretch works fine, but performance degrades on low-end devices. What’s the hidden cost of stretch, and how would you optimize it?
2
In our component library, align-items: stretch causes unintended height inflation in nested flex containers. How do you design a reusable layout system that avoids this while keeping flexibility?
3
A legacy app uses stretch for vertical alignment, but now we’re migrating to CSS Grid. What edge cases in stretch behavior should we audit before deprecating it?

8+ years experience

1
We’re standardizing our design system across 12 product teams, and stretch is inconsistently used — some teams rely on it for vertical alignment, others avoid it due to layout instability. How do you drive alignment without forcing a rigid solution?
2
Our CSS architecture has hundreds of flex containers using stretch; now we’re introducing a new accessibility requirement that caps max-height. How do you migrate safely without breaking existing layouts or requiring manual updates across teams?
3
Stretch behavior interacts unpredictably with viewport units and scroll containers in our mobile web app. As the lead architect, how do you decide whether to deprecate stretch entirely or invest in a custom layout abstraction layer?

Follow-up Questions

❓What if one item has a fixed height — does it still stretch?
❓How would you make one item not stretch while others do?
❓Have you ever seen this cause layout bugs in responsive designs?