CSS flexbox sizing: make control rows wrap without clipping

How the rule works

A case toolbar contains a title and two actions. The title can be long after translation, so the row wraps and the title is allowed to shrink. The actions keep their readable labels and do not disappear behind an overflow mask. The sample uses a flexible title group and natural button widths; it does not reorder items visually. At high zoom, wrapping is preferable to squeezing labels into unreadable controls. If the toolbar becomes a two-dimensional dashboard, grid may express the track relationships more clearly.

.case-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.case-toolbar__title { flex: 1 1 18rem; min-inline-size: 0; }
.case-toolbar__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.case-toolbar button { min-block-size: 2.75rem; }

Cost and verification

Flex layout itself is generally cheap, but deeply nested flex containers can complicate debugging and cause unnecessary recalculation when many items change. Test an extremely long case title and 200% zoom. A min-inline-size of zero permits the title to shrink, but unbreakable tokens still need wrapping or overflow rules. Keep the source order aligned with keyboard order; order and row-reverse only change paint, not the underlying sequence.

Common Mistakes

• Do not hide overflowing buttons when wrapping would preserve access.
• Do not use visual order to repair a wrong DOM order.
• Do not assume flex:1 alone defeats the item's automatic minimum.

Connected lessons

• CSS Layout
• CSS grid tracks: reserve a sidebar without letting content widen the page
• CSS overflow: contain long data without losing controls
• Responsive CSS: keep reading order and controls usable

Property decisions

• CSS flex shorthand and order: distribute space without changing meaning