flex-grow, flex-shrink, flex-basis (on children)

Tell flex children how to consume space

Three properties on children:

.item {
  flex-grow: 1;       /* how much of EXTRA space this gets (proportionally) */
  flex-shrink: 1;     /* how much it SHRINKS when over-budget (proportionally) */
  flex-basis: auto;   /* starting size before grow/shrink kicks in */
}

The shorthand: flex

.item { flex: 1; }              /* = flex: 1 1 0       — equal share of space */
.item { flex: 1 1 auto; }       /* equal share, but start from content size */
.item { flex: 0 0 200px; }      /* exactly 200px, never grow, never shrink */
.item { flex: none; }           /* shorthand for 0 0 auto */

Common patterns

.sidebar { flex: 0 0 240px; }   /* fixed-width sidebar */
.main { flex: 1; }              /* fill remaining space */

Sidebar stays exactly 240px wide. Main takes whatever's left.

Proportional grow

.col-a { flex-grow: 1; }
.col-b { flex-grow: 2; }
.col-c { flex-grow: 1; }

Extra space splits 1:2:1 — col-b gets twice as much as the others.

The 5-minute rule

If you're stuck wrapping your head around grow/shrink/basis, here's the rule of thumb:

• flex: 1 on every flex child → they share space EQUALLY.
• flex: 0 0 Npx → fixed-width that doesn't flex.
• Combine: one fixed sidebar + flex: 1 main.