How do flex-grow, flex-shrink and flex-basis work?

Question

Accepted Answer

These three properties on **flex items** control how they share space along the main axis. The shorthand `flex` combines them.

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: the starting size BEFORE growing/shrinking */
/*        │ └──── flex-shrink: how much it shrinks when space is tight */
/*        └────── flex-grow: how much it grows to fill extra space */
```

## Each property explained

- **`flex-basis`** — the item's ideal/initial main-axis size (like `width` for a row). `auto` uses the content size.
- **`flex-grow`** — if there's *extra* space, how greedily this item expands. `0` = don't grow; higher numbers grow proportionally.
- **`flex-shrink`** — if there's *not enough* space, how readily this item shrinks. `0` = never shrink (can cause overflow); default `1` = shrink as needed.

## Growing proportionally

```css
.a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
```

Extra space is divided in the ratio of the grow values, not absolute sizes.

## Common shorthand values

```css
.item { flex: 1; }      /* = 1 1 0  → all items share space EQUALLY (equal widths) */
.item { flex: auto; }   /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; }   /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
```

`flex: 1` on every item makes equal columns; `flex: 0 0 250px` makes a rigid fixed-width panel next to a flexible one.

## A real layout: fixed sidebar + fluid content

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; }          /* takes all remaining space */
```

## Why it matters

These properties are how you control proportional sizing in flex layouts — equal columns (`flex: 1`), fixed-plus-fluid panels (`flex: 0 0 X` + `flex: 1`), and preventing unwanted shrinking (`flex-shrink: 0`).

Understanding basis/grow/shrink turns Flexbox from "items just sit there" into precise, responsive control.