Grow, shrink, and basis

Flex sizing begins from each item’s flex base size, compares the items with the container, then distributes positive or negative free space.

.sidebar { flex: 0 0 16rem; }
.main { flex: 1 1 30rem; }

The shorthand order is grow, shrink, basis.

The sidebar neither grows nor shrinks from 16rem. The main area can grow and shrink from a starting basis of 30rem.

flex: 1 is commonly treated as 1 1 0, so equal siblings share free space from a zero basis. flex: auto means 1 1 auto and begins from the item’s width or content size. Those are different layout decisions.

Grow factors divide positive free space. Shrink factors act on negative free space and are weighted by the base sizes, so two items with flex-shrink: 1 do not necessarily lose the same number of pixels.

Long unbreakable content can prevent an item from shrinking because a flex item’s automatic minimum often follows its min-content size. min-inline-size: 0 allows it to shrink below that content-based minimum; the content still needs wrapping or intentional overflow handling.

In DevTools, inspect the Flexbox sizing information. Compare flex: 1, flex: auto, and flex: none, then insert a long URL. Do not add overflow: hidden merely to make the symptom disappear—identify which minimum size is constraining the item.