How to assign different widths to flex items

Control flex item width with the `flex` shorthand: `flex-grow` (share of extra space), `flex-shrink` (share of overflow reduction), `flex-basis` (starting size). `flex: 1` makes items share space equally; different grow values or explicit `flex-basis`/`width` give different widths. `flex: 0 0 200px` fixes a width; `flex: 2` vs `flex: 1` makes a 2:1 ratio.

5 min read·~8 min to think through

Flex item sizing is controlled by three properties, usually written via the flex shorthand.

The three properties

css

.item {
  flex-grow: 1;     /* how much of LEFTOVER space this item takes (ratio) */
  flex-shrink: 1;   /* how much this item SHRINKS when there's overflow (ratio) */
  flex-basis: auto; /* the item's starting size before grow/shrink */
}
/* shorthand */
.item { flex: 1 1 auto; }   /* grow shrink basis */

Common patterns

Equal widths — all items share space equally:

css

.item { flex: 1; }   /* = flex: 1 1 0  → every item gets an equal share */

Proportional widths — a 2:1:1 ratio:

css

.a { flex: 2; }   /* twice the share of leftover space */
.b { flex: 1; }
.c { flex: 1; }

Fixed width for one, flexible for the rest — classic sidebar + content:

css

.sidebar { flex: 0 0 240px; }  /* don't grow, don't shrink, exactly 240px */
.content { flex: 1; }          /* takes all remaining space */

Explicit different widths with flex-basis:

css

.a { flex: 1 1 30%; }
.b { flex: 1 1 70%; }

flex: 1 vs flex: auto vs flex: initial

Shorthand	grow / shrink / basis	Behavior
`flex: 1`	`1 1 0`	Items size equally, ignoring content size
`flex: auto`	`1 1 auto`	Items grow/shrink but start from content size — bigger content → bigger item
`flex: initial`	`0 1 auto`	Don't grow; shrink if needed (the default)
`flex: none`	`0 0 auto`	Fixed at content size, no flexing

The flex: 1 vs flex: auto distinction trips people up: with flex: 1 (basis 0) all items end equal; with flex: auto (basis auto) items with more content end up wider.

flex-basis vs width

flex-basis is the flex-aware sizing property and wins over width in a flex row. Use flex-basis inside flex containers; it also accounts for box-sizing. Note flex-basis: auto falls back to the width/height property if set.

Gotchas

min-width: auto is the default on flex items — it can prevent shrinking below content size, causing overflow. Set min-width: 0 to allow real shrinking (common with text/ellipsis).
flex-shrink is proportional and weighted by basis size, so shrink math isn't purely ratio-based.

Senior framing

The senior signal is explaining that flex is about distributing leftover space, not setting absolute widths — flex-basis is the starting point, grow/shrink are ratios applied to the surplus/deficit. And knowing the min-width: auto gotcha, because it's the #1 reason "my flex item won't shrink / text won't truncate."

Follow-up questions

•What's the difference between `flex: 1` and `flex: auto`?
•Why won't my flex item shrink below its content, and how do I fix it?
•flex-basis vs width — which wins and why?

Common mistakes

•Using `width` instead of `flex-basis` inside a flex row.
•Forgetting `min-width: auto` blocks shrinking (breaks text-overflow: ellipsis).
•Confusing flex: 1 (equal) with flex: auto (content-based).
•Thinking flex-grow values are absolute widths, not ratios.

Edge cases

•flex-shrink math is weighted by flex-basis, not a pure ratio.
•Percentage flex-basis is relative to the container's main size.
•Nested flex items need min-width:0 at each level for truncation to work.

Real-world examples

•Sidebar + content layouts, equal-width button rows, proportional column layouts, truncating text in flex rows.