Flex Grow, Shrink, and Basis

Flexible sizing is governed by the base size of items, how extra space is shared, and how items shrink when space is limited.

What you’ll learn

Distinguish flex-basis from final rendered size.
Use growth factors to distribute spare space.
Recognize why min-width can block shrinking.

Understand the concept

flex-basis provides an initial main-axis size used by the flex algorithm. flex-grow gives relative shares of positive free space, and flex-shrink controls reduction when items do not fit. The shorthand flex: 1 commonly creates equally distributed flex items, though intrinsic minimum sizes can still restrict shrinking.

min-width: 0 on a row flex item permits it to shrink below its intrinsic content width, which is essential for ellipsis or very long labels.

What the browser evaluates

The browser starts with a flex base size and then distributes free or negative space according to the flex algorithm and size constraints.

Give one item more growing space

Compare columns with a flexible main panel.

HTML

<div class="grow-demo"><div class="grow-side">Menu</div><div class="grow-main">Main area</div></div>

CSS

.grow-demo { display: flex; gap: 8px; max-width: 390px; padding: 10px; background: #f1f5f9; }
.grow-side { flex: 1; background: #bfdbfe; padding: 12px; border-radius: 7px; }
.grow-main { flex: 2; background: #99f6e4; padding: 12px; border-radius: 7px; }

Rendered output

Menu

Main area

Observe: The green panel receives roughly twice the available flexible space of the blue panel.

Constrain a long shrinking label

Permit the title column to contract and display an ellipsis.

HTML

<div class="grow-demo"><div class="grow-main">Long inventory identifier that must fit beside its status</div><div class="grow-side">In stock</div></div>

CSS

.grow-demo { display: flex; gap: 8px; max-width: 335px; padding: 10px; background: #f1f5f9; }
.grow-main { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #bfdbfe; padding: 12px; border-radius: 7px; }
.grow-side { flex: 0 0 auto; background: #99f6e4; padding: 12px; border-radius: 7px; }

Rendered output

Long inventory identifier that must fit beside its status

In stock

Observe: The long label shrinks and truncates while the status remains readable at its natural width.

Explain the result

The browser starts with a flex base size and then distributes free or negative space according to the flex algorithm and size constraints.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

Common mistakes to avoid

Flex sizing is not simply equal widths when content min-size and padding are considered.
A long unbreakable label may refuse to shrink until min-width:0 or equivalent constraints are applied.

Try it yourself

Change flex:2 to flex:3 in the first example, then remove min-width:0 from the second and observe the possible overflow.

Before changing the code, predict what will change. Then verify by checking the rendered result.

What you should remember

Think in terms of base size, free space and shrink constraints before adjusting flex factors.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Flex Gap, Order, and Alignment →

Flex Grow, Shrink, and Basis