flex-basis vs width: which one wins, and why

· Tags: flexbox, sizing

You write width: 200px on a flex item, then later add flex: 1 1 100px. The item ends up 100px wide. Width loses. The reverse case, with width declared after the shorthand, also gives 100px. Width still loses. The order of declarations does not matter; the cascade is not what is happening here.

The rule

Per Flexbox spec section 7.2, when computing the main size of a flex item, flex-basis with a non-auto value takes precedence over width (or height, on a column flex). Width still applies for the cross axis when it is not the main axis. With flex-direction: row, flex-basis wins on the horizontal; with flex-direction: column, flex-basis wins on the vertical and width still controls the horizontal.

The auto trap

flex-basis: auto means “look at the main-size property,” which is width on a row. So flex: 1 1 auto with width: 200px uses 200px as the basis. flex: 1 is shorthand for 1 1 0% — basis is 0%, not auto — which is why flex: 1 ignores any width you set. This is the most common source of confusion in flex layouts and it is documented in the spec only in the small print.

What min-width does

Both width and flex-basis are clamped by min-width and max-width. A basis of 100px on an item with min-width: 200px gives 200px. The flex sizing algorithm runs in two passes: hypothetical sizes are computed from basis, then clamped, then negotiated for free space. Eric Meyer’s CSS: The Definitive Guide (5th ed., O’Reilly, 2023, ch. 12) walks through the algorithm step by step and is the clearest reference outside the spec itself.

Practical guidance

  • For a fixed-size item that should never grow or shrink: flex: 0 0 200px. Don’t set width.
  • For a fluid item with a floor: flex: 1 1 200px; min-width: 100px.
  • For an item whose width matters at design-time but should grow: set width and use flex: 1 1 auto.
  • If your tooling autocompletes flex: 1, change it. Always be explicit about the basis.

Related

Get FlexFrog on the App Store. Built by Moruk Labs.