In Flexbox, you can make a single flex item occupy the remaining space in a container by using the flex-grow property or the shorthand flex property.

Key Techniques

1
Set the container's display to flex.
2
Set the flex item you want to expand with flex: 1 (or flex-grow: 1) so it takes up remaining space.
3
Other flex items can have flex: 0 or fixed widths so they do not grow.
4
Combine with gap for spacing between items if needed.

Example: One Flex Item Fills Remaining Space

In this example, the middle .item-flex expands to fill all remaining space between the two fixed-width items, demonstrating how flex: 1 allows a flex item to take up available space.

Difficulty: 3/10

Topics: flex-grow, flex-basis, remaining space allocation

Scenario Questions

0-2 years experience

1
You have a header with a logo on the left and a search bar on the right — you want the search bar to stretch and fill all the remaining space. How would you do that with flexbox?
2
I see a flex container with three items: two have fixed widths, and the third is supposed to take up the rest. The third item isn't expanding — what’s the most likely mistake?
3
How would you make a button fill the remaining horizontal space in a nav bar without using absolute positioning?

2-5 years experience

1
A card component has a title, a description, and a CTA button — the description should expand to fill space, but on mobile it overflows. What’s going wrong, and how would you fix it?
2
We added flex-grow: 1 to a sidebar panel, but now it’s pushing content off-screen on small screens. How would you debug and resolve this without breaking desktop layout?
3
A modal has a scrollable content area that should fill the remaining height after header and footer — it works in Chrome but not Safari. What could be the issue, and how would you investigate?

5-8 years experience

1
You’re designing a responsive dashboard with collapsible sidebars and dynamic panels — how do you ensure the main content area reliably fills remaining space across breakpoints, devices, and zoom levels without layout thrashing?
2
In a legacy app, flex-grow is used inconsistently across components — sometimes it works, sometimes it doesn’t. What systemic issues might cause this, and how would you refactor for reliability?
3
A team built a layout using flex-grow on multiple elements, but performance degrades on low-end devices when resizing. What’s the root cause, and how would you optimize the rendering pipeline?

8+ years experience

1
We’re migrating from a grid-based layout system to flexbox for our design system — how do you ensure consistent remaining-space behavior across 50+ components without introducing regressions in legacy pages?
2
A cross-team component library uses flex-grow differently in various contexts, causing inconsistent UI behavior. How would you enforce standardization at the architecture level, and what tradeoffs would you consider between flexibility and predictability?
3
Our app supports 12 languages with RTL/LTR switching — flex-grow-based layouts break in RTL mode on some browsers. How would you design a future-proof, maintainable solution that scales across internationalization requirements?

Follow-up Questions

❓What happens if you set width: 100% on the flex item instead of flex-grow?
❓How would you debug if the item isn't expanding even with flex-grow: 1?
❓What if there are two items both with flex-grow: 1 — how is space divided?