CSS Flexbox: flex-grow, flex-shrink, flex-basis Explained

Beyond positioning items with justify-content and align-items, flexbox gives you three properties that control how individual items resize to fill or share available space: flex-grow, flex-shrink, and flex-basis. Together they answer the question "when there's extra space, or not enough space, which items change size, and by how much?"

flex-basis: The Starting Size

flex-basis sets an item's initial size along the main axis, before any growing or shrinking happens. Think of it like width, but specifically for the main axis.

.sidebar { flex-basis: 240px; }
.main    { flex-basis: 0; }

flex-grow: Who Gets the Extra Space

If there's leftover space in the container after every item's basis is accounted for, flex-grow decides who absorbs it, and how much.

<div class="layout">
  <div class="sidebar">Sidebar</div>
  <div class="main">Main content</div>
</div>

.layout { display: flex; }

.sidebar {
  flex-grow: 0;      /* never grows — stays at its basis width */
  flex-basis: 240px;
}

.main {
  flex-grow: 1;      /* absorbs all remaining space */
  flex-basis: 0;
}

This produces the classic fixed-sidebar-plus-fluid-content layout: the sidebar stays locked at exactly 240px no matter how wide the browser window gets, while the main content area automatically stretches to fill every remaining pixel. If you set flex-grow: 1 on both elements instead, they'd split the extra space 50/50; set one to flex-grow: 2 and it would claim twice as much of the leftover space as a sibling with flex-grow: 1.

flex-shrink: Who Gives Up Space

flex-shrink is the mirror image — it controls how items shrink when the container is too narrow to fit everyone at their full basis size. By default every flex item has flex-shrink: 1, meaning they all shrink proportionally.

.logo {
  flex-shrink: 0;    /* never shrink the logo, even in a tight navbar */
  flex-basis: 120px;
}

.nav-links {
  flex-shrink: 1;    /* this can shrink if space runs out */
}

Setting flex-shrink: 0 on the logo guarantees it always renders at its full intended size, even on a narrow screen where something has to give — the nav links area shrinks (or wraps) instead, rather than letting the logo get squashed and distorted.

The flex Shorthand

In practice, these three are almost always set together using the flex shorthand: flex: grow shrink basis.

.main {
  flex: 1 1 0;   /* equivalent to flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}

.sidebar {
  flex: 0 0 240px; /* grow: 0, shrink: 0, basis: 240px — a fixed-width column */
}

flex: 0 0 240px is such a common pattern for a "never resize this" fixed column that it's worth memorizing as a single idiom, distinct from the fluid flex: 1 column next to it.

---