Content updated
By the end, you can…
- A grow factor divides extra space, not the entire final width. Shrink weights also depend on the starting basis.
- Predict the widths in a weighted-growth layout, then repair a narrow row that contains an unbroken label.
Build on the CSS introduction
A flex basis is the starting main-axis size, not a promise of the final size. In the growth example, three 60px bases occupy 180px of a 360px container. The remaining 180px is shared with factors 1, 2, and 1. That gives additions of 45px, 90px, and 45px, producing final widths of 105px, 150px, and 105px. No item padding or gaps complicate this calculation.
For shrinking, equal factors are scaled by the starting bases. Two bases of 200px and 100px need to lose 60px to fit a 240px container. With shrink factors of one and no blocking minimums, their contributions are 40px and 20px. The result is 160px and 80px, not an equal 30px reduction from each. These calculations assume the minimum sizes do not stop the algorithm early.
Content introduces constraints. A flex item can keep an automatic minimum wide enough for a long unbroken label. min-width: 0 permits the item to shrink, but you must also decide how its content remains readable. The content example adds overflow-wrap: anywhere so text can break rather than spill out. Test both the item's box and its text; solving one does not automatically solve the other.
What to remember first
A grow factor divides extra space, not the entire final width. Shrink weights also depend on the starting basis.
Tools for this experiment
flex: 1 1 60pxGrow, shrink, basis- The three values describe separate steps. The basis remains part of each final width.
flex-grow: 2Take two growth shares- This does not mean twice a sibling's final width. When total grow factors are below one, some free space can remain undistributed.
flex-shrinkWeight missing space- The shrink factor is scaled by the base size before distributing reductions.
min-width: 0Relax the item's minimum- Combine this with a readable content strategy such as wrapping; do not simply hide meaningful text.
Walk through an example
Use this HTML inside the body of a document and place the CSS in your linked stylesheet. The preview adds a dashed outline and card colors to make boundaries visible; those decorations do not control the layout. Its body has 16px padding on each side. Fixed preview widths are intentional: on a small screen, scroll inside the preview to inspect the whole experiment.
<div class="layout">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>.layout {
display: flex;
width: 360px;
gap: 0;
}
.item {
flex: 1 1 60px;
min-width: 0;
}
.item:nth-child(2) {
flex-grow: 2;
}The middle item gains 90px, twice each sibling's 45px growth. Its final 150px width is not twice 105px.
See it happen: try a small change
These numerical examples remove item padding and gaps. The final two choices show why real text adds another constraint.
Code to notice
.layout {
display: flex;
width: 360px;
gap: 0;
}
.item {
flex: 1 1 60px;
min-width: 0;
}
.item:nth-child(2) {
flex-grow: 2;
}Live result
What changed: The middle item gains 90px, twice each sibling's 45px growth. Its final 150px width is not twice 105px.
A common wrong turn
Multiplying grow factors preserves a full-space ratio only under the relevant sizing conditions; factors totaling less than one can leave some free space unused. More generally, padding, borders, gaps, and minimums must be included before treating a numerical example as a universal formula.
Try it in your own project
Copy the example into your local HTML and CSS files. Predict one change before saving and refreshing the browser. Use the interactive versions above to check your prediction, then explain which container, item, or track changed. The related playground offers extra practice with its supported controls; use your local files for properties it does not expose.
Your turn: calculate growth, shrinkage, and minimum sizes
Predict the widths in a weighted-growth layout, then repair a narrow row that contains an unbroken label.
Optional exploration
Use the playground to explore the controls and generated code. It is an open experiment, so it does not check your answer.
- Calculate the free space in the 360px example and predict 105px, 150px, and 105px. Compare with DevTools measurements.
- Switch to the two-item shrink example and calculate why the reductions are 40px and 20px.
- Compare the long-label versions. In your own file add min-width: 0 and overflow-wrap: anywhere, then verify the text remains readable at a narrow width.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.