OnlineCBT
Distribute space from an initial size
The flex shorthand sets grow, shrink and basis. Basis supplies an initial main size before flexible space is distributed. Grow shares positive free space; shrink participates when items must become smaller. These numbers are factors, not direct percentages of the container.
.layout { display: flex; gap: 1rem; }
.sidebar { flex: 0 0 14rem; }
.content { flex: 1 1 0; min-width: 0; }The sidebar neither grows nor shrinks from its 14rem basis. Content takes remaining space and can shrink. This exact arrangement still needs a responsive fallback when the viewport cannot fit the sidebar and useful content together.
Grow ratio experiment
.a { flex: 1 1 0; }
.b { flex: 2 1 0; }With equal relevant constraints and zero bases, the items share distributable free space in a 1:2 ratio. This is not a guarantee that every outer width will be exactly one-third or two-thirds: borders, padding, gaps and minimum/maximum sizes still participate.
Shrink is scaled by size
Negative free space is distributed using the shrink factors together with the flex base sizes. Two differently sized items with shrink:1 do not necessarily lose the same number of pixels. An item's automatic minimum size can also prevent the shrinkage you expected.
Useful shorthand meanings
flex:none represents a non-flexible item. flex:auto allows growth and shrinkage with an auto basis. A common flex:1 pattern gives a flexible item with a zero-like basis, but explicit three-value syntax is easier to reason about while learning.
Practice
- Create two items with factors 1 and 2, then add padding and inspect the actual border-box widths.
- Change the bases from zero to 12rem and observe that only remaining free space is shared.
- Place a long unbroken string in content and compare min-width:auto with min-width:0.
- Add a media query that stacks the fixed sidebar above content when space becomes insufficient.
