flex-grow controls how flex items divide the remaining space in their container after flex-basis, gaps, and margins have been accounted for. A value of 0 preserves the item’s basis; nonzero values let items expand until the remainder is consumed. section 4.2.2
Use the values as relative weights:
- flex-grow: 1 gives an item one share of the remainder. section 4.2.2
- flex-grow: 2 gives an item twice the additional space received by an item with flex-grow: 1. section 4.2.2
- Use flex: 2 and flex: 1 for proportional columns; these shorthand values provide a zero-percent basis, so nearly the entire container becomes distributable remainder. section 4.2.2 section 4.2
- Prefer the flex shorthand when the goal is ordinary flexible sizing, because it supplies useful grow, shrink, and basis defaults. section 4.2.2
Two columns with a weighted remainder
.flex { display: flex; gap: var(--gap-size); } .column-main { flex: 2; } .column-sidebar { flex: 1; } The main column receives two-thirds of the remainder and the sidebar receives one-third. The gap is accounted for before the remaining width is divided. section 4.2 section 4.2.2
Growing items along a vertical axis
.column-sidebar { display: flex; flex-direction: column; } .column-sidebar > .tile { flex: 1; } With a constrained container height, both tiles grow to fill the column. Without an external height constraint, vertical flex growth has no additional space to distribute. section 4.3.1
Figure 4.10 Items with a higher flex-grow value consume a higher proportion of the remaining available width.
Compare how higher flex-grow values consume larger proportions of the available width. section 4.2.2
