Flexbox: flex-grow, shrink and basis
Decode the flex shorthand once and for all, and learn the min-width:0 trick that fixes overflowing flex items.
Everyone uses display: flex; far fewer truly understand the flex shorthand. It bundles three properties, and knowing them turns flexbox from guesswork into control.
flex: <grow> <shrink> <basis>;
/* flex: 1 1 0 -> grow and shrink from a 0 basis (equal columns) */
/* flex: 0 0 auto -> don't grow or shrink; size to content */
/* flex: 1 -> shorthand for 1 1 0 */- grow — how eagerly an item takes leftover free space (relative to its siblings' grow values).
- shrink — how readily it gives up space when things get tight.
- basis — its starting size before grow/shrink kick in. A
0basis gives truly equal columns;autostarts from content size.
The min-width: 0 lifesaver
Flex items refuse to shrink below their content's minimum size by default. So a long, unbroken string or an overflowing child blows the layout wide. The fix is almost magical: set min-width: 0 (or min-inline-size: 0) on the flex item, letting it shrink properly and its own overflow or text-overflow take over.
Example
When to use it
- A developer sets flex: 1 on main content and flex: 0 0 240px on a sidebar to give the sidebar a fixed width while the main area fills the rest.
- A developer adds min-width: 0 to a flex child containing long text to allow it to shrink below its content width and prevent overflow.
- A designer uses flex-grow: 2 on a featured column to make it absorb twice the extra space compared to sibling flex items.
More examples
flex shorthand decoded
Breaks down the three-value flex shorthand showing how grow, shrink, and basis combine to control item sizing.
/* flex: grow shrink basis */
.sidebar { flex: 0 0 240px; } /* fixed 240px, no grow/shrink */
.main { flex: 1 1 0; } /* grow and shrink freely */
.feature { flex: 2 1 0; } /* grows twice as fast as flex:1 */min-width 0 fix for overflow
Adding min-width: 0 overrides the browser's default minimum size so long text inside a flex item can shrink and truncate.
.flex-row {
display: flex;
gap: 16px;
}
.text-col {
flex: 1;
min-width: 0; /* allows shrinking below content size */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Flex grow ratios in practice
Shows three columns sharing available space in a 1:1:2 ratio using flex-grow values without explicit width declarations.
.columns {
display: flex;
gap: 20px;
}
.col-1 { flex: 1; } /* gets 1/4 of spare space */
.col-2 { flex: 1; } /* gets 1/4 of spare space */
.col-main { flex: 2; } /* gets 2/4 of spare space */
Discussion