CSS flex-grow, flex-shrink, flex-basis — The Flex Property Explained

The flex shorthand sets three properties: flex-grow, flex-shrink, and flex-basis. Understanding these three values is the key to mastering flexbox layouts.

Generate flexbox layouts visually with the Flexbox Generator.

The flex shorthand

/* flex: <flex-grow> <flex-shrink> <flex-basis> */
flex: 1 1 0%;      /* flex: 1 */
flex: 0 0 auto;    /* flex: none (rigid size) */
flex: 1 1 auto;    /* flex: auto */
flex: 0 1 auto;    /* Default (don't grow, can shrink) */

flex-grow: how much space to claim

flex-grow is a unitless ratio. Items with higher values claim more of the available free space.

.container {
  display: flex;
  width: 600px;
}

.sidebar    { flex-grow: 1; }  /* Gets 1/4 of free space */
.main       { flex-grow: 3; }  /* Gets 3/4 of free space */

/* If sidebar flex-basis = 0, main flex-basis = 0:
   sidebar = 600 * (1/4) = 150px
   main    = 600 * (3/4) = 450px */

/* flex-grow: 0 (default) — item stays at its content/basis size */
.fixed-width-item {
  flex-grow: 0;
  width: 200px;  /* Won't expand beyond 200px */
}

flex-shrink: how much to compress

flex-shrink controls how items shrink when the container is smaller than the total content size.

.container {
  display: flex;
  width: 400px;
}

.item-a { width: 300px; flex-shrink: 1; }  /* Can shrink */
.item-b { width: 300px; flex-shrink: 2; }  /* Shrinks 2x as fast as item-a */
/* Total: 600px, container: 400px, overflow: 200px */
/* item-a shrinks: 200 * (1/3) ≈ 67px → renders at ~233px */
/* item-b shrinks: 200 * (2/3) ≈ 133px → renders at ~167px */

/* Prevent shrinking: */
.no-shrink {
  flex-shrink: 0;  /* Never smaller than flex-basis/width */
  min-width: 200px;
}

flex-basis: initial size before growing/shrinking

/* flex-basis: auto (default) — use the element's width/height */
flex-basis: auto;       /* width: 200px → basis = 200px */

/* flex-basis: 0 — treat initial size as 0 */
/* flex: 1 is shorthand for flex: 1 1 0% */
/* With basis=0, grow distributes ALL space proportionally */

/* Explicit sizes: */
flex-basis: 200px;
flex-basis: 30%;
flex-basis: 0;
flex-basis: content;    /* Based on content size (like auto) */

flex: 1 vs flex: auto vs flex: none

/* flex: 1 = flex: 1 1 0% */
/* Initial size = 0, grows to fill space, can shrink */
/* Distributes ALL container space equally among flex: 1 items */
.equal-columns { flex: 1; }

/* flex: auto = flex: 1 1 auto */
/* Initial size = content/width, grows to fill remaining space */
/* Larger content = larger final size even when growing */
.auto-item { flex: auto; }

/* flex: none = flex: 0 0 auto */
/* Fixed size based on content/width, doesn't grow or shrink */
.fixed-item { flex: none; }

/* flex: 0 = flex: 0 1 0% */
/* Shrinks to 0 if needed, doesn't grow (rare use) */

Practical patterns

Equal-width columns

.grid {
  display: flex;
  gap: 1rem;
}

.grid > * {
  flex: 1;  /* All columns equal width */
}

Fixed sidebar + flexible main

.layout {
  display: flex;
  gap: 2rem;
}

.sidebar {
  flex: 0 0 280px;  /* Fixed 280px, no grow/shrink */
}

.main {
  flex: 1;           /* Takes all remaining space */
  min-width: 0;      /* Prevent overflow from long content */
}

Navigation with overflow hidden

.nav {
  display: flex;
  overflow: hidden;
}

.nav-logo {
  flex: 0 0 auto;  /* Fixed size */
}

.nav-links {
  flex: 1;
  overflow: hidden;  /* Hide overflow links */
  white-space: nowrap;
}

.nav-cta {
  flex: 0 0 auto;  /* Fixed size */
  margin-left: auto;
}

Card list with minimum content width

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 280px;   /* Grow/shrink, but never narrower than 280px */
  /* With wrap: creates responsive columns automatically */
}

The min-width: 0 gotcha

/* flex children can overflow their container! */
/* Flex items have an implicit minimum width = content size */

.flex-child {
  flex: 1;
  /* If this contains a long word or a pre/code block,
     it can overflow the flex container! */
  
  min-width: 0;  /* Override the implicit minimum */
  overflow: hidden;
  text-overflow: ellipsis;
}

Related tools

• Flexbox Generator — visualize flex properties
• CSS Grid Generator — grid-based layouts
• PX to REM Converter — convert flex-basis values