Flexbox can manage both fixed-width and flexible-width items within the same container. Fixed-width items maintain their specified size, while flexible items grow or shrink to fill the remaining space.

Key Points

1
Fixed-width items use a specific width value and do not grow or shrink unless flex-shrink is applied.
2
Flexible items use the flex property (e.g., flex: 1) to take up remaining space after accounting for fixed items.
3
Flex items respect flex-grow, flex-shrink, and flex-basis when distributing remaining space.
4
Using flex-wrap: wrap allows flexible items to move to the next line if space is insufficient.

Example: Fixed and Flexible Widths

In this example, the first item has a fixed width of 150px, while the other two items share the remaining space equally due to flex: 1.

Difficulty: 6/10

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

Scenario Questions

0-2 years experience

1
You have a flex container with three items: one with width: 100px, one with flex: 1, and one with flex: 2. The container is 500px wide. How wide is each item, and why?
2
If you set a flex item to width: 300px and flex-grow: 1, but the container is only 400px wide with two other items taking up 150px total, what happens to the item with width: 300px?
3
How would you make a flex item stay exactly 200px wide while letting others grow to fill the rest of the space?

2-5 years experience

1
A responsive card grid breaks on mobile: one item with a fixed image width overflows the container. The rest use flex: 1. Why is this happening, and how do you fix it without changing the HTML?
2
Your team’s header component uses flexbox with a logo (fixed width) and a nav (flex: 1), but on small screens, the nav text wraps awkwardly. How do you adjust the flex properties to preserve layout integrity?
3
A modal dialog’s content area has a fixed-height header and a flex: 1 body, but the body overflows on iOS Safari. What’s likely causing this, and how do you debug it?

5-8 years experience

1
You’re designing a dynamic dashboard with resizable panels: some have min/max widths, others are flexible. How do you structure the flexbox rules to avoid layout thrashing during resize, especially with nested flex containers?
2
A legacy component uses flexbox with mixed fixed and flexible widths, but it’s causing performance issues on low-end devices during window resize. What optimizations would you consider, and what tradeoffs do you weigh?
3
How would you design a responsive sidebar layout where the sidebar has a minimum width of 240px, the main content grows, but both must respect a max-width on large screens — without using media queries for the core layout logic?

8+ years experience

1
You’re migrating a legacy UI from float-based layouts to flexbox across 50+ components. Many rely on fixed widths with implicit flex behavior. How do you prioritize refactoring to avoid regressions, and what metrics would you track to validate stability?
2
Your design system allows teams to compose layouts using flexbox primitives, but inconsistent use of fixed vs. flexible widths is causing cross-team layout drift. How do you enforce consistency at the architecture level without stifling flexibility?
3
A global component library uses flexbox for responsive grids, but legacy clients still support IE11. How do you architect the flexbox rules to degrade gracefully while preserving modern behavior, and what long-term maintenance tradeoffs do you accept?

Follow-up Questions

❓What happens if you set width: 200px and flex-grow: 1 on the same item?
❓How would you debug a layout where a flex item isn't shrinking even though the container is too small?
❓Why might flex: 1 not work as expected when combined with max-width?