flex-basis and width may seem similar, but they serve different purposes in Flexbox layouts. flex-basis defines the initial size of a flex item before distributing remaining space, while width is the standard CSS width property.

Key Differences

1
flex-basis: Sets the starting size of a flex item along the main axis before flex-grow and flex-shrink are applied. Can be auto, a length, or a percentage.
2
width: Sets the fixed width of an element regardless of Flexbox behavior. It does not account for available space distribution automatically.
3
Priority: If flex-basis is specified, it overrides width in determining the initial main size of a flex item.
4
Flexibility: flex-basis works with flex-grow and flex-shrink to create flexible layouts, while width alone creates a fixed-size element unless combined with Flexbox properties.

Example: flex-basis vs width

In this example, the first item (flex-basis) starts at 200px but can grow to fill available space due to flex-grow: 1. The second item (width) remains fixed at 200px initially, but flex-grow: 1 may cause it to behave differently depending on browser interpretation.

Difficulty: 6/10

Topics: flex-basis, layout behavior, box-sizing interaction

Scenario Questions

0-2 years experience

1
You're building a card grid with three items in a row, and you set width: 300px on each, but they're wrapping unexpectedly — what’s the most likely cause, and how would you fix it using flex-basis?
2
If you set flex-basis: 200px on a flex item but its content is only 100px wide, will it shrink? Why or why not?
3
A teammate says 'I set width: 50% on my flex item but it's not taking half the container' — what would you check first?

2-5 years experience

1
Our responsive product grid breaks on mobile — items overflow when flex-basis is set to auto, but work fine with width: 100%. What’s the root cause, and how would you debug this without breaking desktop layout?
2
A modal component uses flexbox for its content area, but when you add a long heading, the layout collapses. You tried setting width: 100%, but it didn’t help. What’s the real issue, and how would you fix it using flex-basis correctly?
3
We have a dynamic sidebar that should be 250px wide on desktop but collapse to auto on mobile. We tried width: 250px and flex: 1 on the main content, but the sidebar still shrinks too much. What’s the right way to structure this with flex-basis?

5-8 years experience

1
We’re migrating a legacy layout from float-based grids to flexbox, and some components are rendering inconsistently across browsers. The issue only appears when flex-basis is auto and content is dynamic — how would you design a robust, cross-browser solution that avoids layout thrashing?
2
Our design system has a reusable flex-based card component that needs to support both fixed-width and fluid layouts. How would you architect the CSS so that flex-basis and width interact predictably across different usage contexts without requiring consumers to override styles?
3
In a high-performance dashboard with 50+ dynamic flex items, we’re seeing jank on scroll. After profiling, layout recalculations are the bottleneck. How would you optimize flex-basis usage to reduce reflow cost without sacrificing layout flexibility?

8+ years experience

1
We’re designing a cross-platform UI framework that must support both flexbox and grid layouts interchangeably. How would you define a consistent API for sizing primitives that abstracts the difference between flex-basis and width without leaking implementation details to component consumers?
2
Our legacy CSS architecture has hundreds of components mixing width, min-width, and flex-basis inconsistently — leading to unpredictable layouts across teams. How would you design a migration strategy and linting rules to enforce a scalable, maintainable sizing pattern across the organization?
3
We’re evaluating whether to standardize on flex-basis over width for all new components. What are the long-term maintenance, performance, and accessibility tradeoffs of this decision, and how would you communicate it to engineering and design leadership?

Follow-up Questions

❓What happens if you set both flex-basis and width on the same flex item?
❓How does flex-basis behave differently when flex-wrap is enabled?
❓Can you explain why a flex item might ignore its width value in a row container?