Flexbox does not alter the fundamental CSS box model of elements. Width, height, padding, border, and margin still apply as usual. Flexbox only affects how items are laid out and distributed within a flex container.

Key Points

1
Box model: Flex items still respect content, padding, border, and margin. Flexbox does not change their sizing calculations directly.
2
Positioning: Flexbox does not change the position property (static, relative, absolute, fixed, sticky) of elements.
3
Layout: Flexbox controls the alignment, spacing, and distribution of flex items along the main and cross axes using flex-direction, justify-content, align-items, align-self, and gap.
4
Overflow handling: Flex items can grow or shrink with flex-grow and flex-shrink, but the box model dimensions remain intact.

Example: Flexbox respects box model

Here, each .item maintains its width, height, padding, border, and margin while Flexbox controls how they grow, shrink, and are spaced within the container.

Difficulty: 6/10

Topics: Flexbox layout, box model interaction, positioning context

Scenario Questions

0-2 years experience

1
You have three divs inside a flex container, each with padding and border, but they’re not lining up evenly — what’s the most likely reason and how would you fix it?
2
If I set a flex item to width: 200px and the container is only 150px wide, what happens? Does the box model change?
3
I added margin: 10px to a flex item and it pushed other items out of alignment — why is that happening?

2-5 years experience

1
Our card grid uses Flexbox, but when a user resizes the browser, some cards overflow and break layout — what’s likely causing this, and how do you debug it without changing the container’s flex properties?
2
A button inside a flex item is misaligned vertically — it’s not centered even though we used align-items: center. What three things would you check in the box model or positioning context?
3
We switched from float-based layout to Flexbox, and now our absolute-positioned dropdowns inside flex items are appearing in the wrong place. Why?

5-8 years experience

1
You’re designing a responsive navigation bar with dynamic content — some items have icons, others have long text. How do you ensure consistent visual alignment without breaking the box model or causing layout thrashing on resize?
2
In a complex dashboard with nested flex containers, we’re seeing unexpected overflow and clipping. How would you trace whether this is a flex sizing issue, a box model miscalculation, or a positioning conflict?
3
We’re migrating from CSS Grid to Flexbox for a legacy component that uses absolute positioning for tooltips. What edge cases in box model interaction could cause visual regressions, and how would you mitigate them?

8+ years experience

1
We have a component library used across 50+ products, all using Flexbox for layout. Some teams are overriding box model properties with !important to fix alignment — how do you design a scalable, maintainable system that prevents this anti-pattern without forcing a full rewrite?
2
Our design system uses Flexbox for all containers, but we’re seeing performance degradation on low-end mobile devices when rendering lists with complex nested flex items. How would you analyze whether the issue stems from layout recalculations due to box model interactions, and what architectural changes would you propose?
3
We’re planning to deprecate Flexbox in favor of CSS Grid for future components. What legacy dependencies around box model assumptions and positioning context in existing components would create the highest risk during migration, and how would you prioritize remediation?

Follow-up Questions

❓What happens if you set width: 100% on a flex item inside a container with flex-wrap?
❓How does align-items: stretch interact with padding or border on flex items?
❓Can you use top: 10px on a flex item and expect it to move relative to the container?