"flex is one property that's actually three. Memorize the three patterns and you're done."
The Three Sub-Properties
Every flex child has three properties that decide its size:
flex-grow(default0) — share of extra space along the main axis.flex-grow: 1takes 1/total-grow of leftover space.flex-shrink(default1) — share of overflow reduction.flex-shrink: 1means the item shrinks when there's not enough room;flex-shrink: 0means it refuses to shrink.flex-basis(defaultauto) — the starting size before grow/shrink calculations.automeans "use the item's content size or its width property"; a length like200pxmeans "start at 200px regardless of content."
The flex Shorthand
flex: <grow> <shrink> <basis>. Three values, in that order. Examples:
flex: 1 1 0— grow 1, shrink 1, start at 0. All siblings with this become equal-width.flex: 1 1 auto— grow 1, shrink 1, start at content/auto size. All siblings with this get proportional shares based on their content.flex: 0 0 200px— no grow, no shrink, fixed 200px. Locked in.flex: 0 1 auto— the default for a flex child. Content size, shrinks if needed, doesn't grow.
The Three Patterns You'll Use 95% Of The Time
flex: 1— shorthand for1 1 0. Equal-share. Pattern: "all these siblings should split the available space evenly."flex: auto— shorthand for1 1 auto. Content-proportional share. Pattern: "these items should share extra space, but their content sizes matter as a starting point."flex: none— shorthand for0 0 auto. Don't grow, don't shrink. Pattern: "this item should stay exactly its content size."
Memorize these three. They cover almost every layout you'll write. Reach for the explicit three-value form (flex: 1 1 200px) when you need precision.
The Equal-Width Columns Pattern
Want three columns to share the row equally regardless of content? flex: 1 on each. Want three columns where one is 300px and the other two split the rest equally? flex: 0 0 300px on the first, flex: 1 on the others.
The Sidebar + Main Pattern
Fixed-width sidebar with flexible main content area:
Or — and more idiomatic in 2026 — use Grid: grid-template-columns: 240px 1fr. Same effect, less typing. Flexbox is still correct here; Grid is just more declarative for two-column patterns.
The Default min-width: auto Pitfall
Flex items have an implicit min-width: auto, which roughly means "don't shrink below the size of the longest unbreakable content (a long word, an image's intrinsic size)." This is usually helpful but occasionally causes mysterious overflow: a flex row containing a child with a long URL or unbreakable text refuses to shrink the child, pushing the row past the container.
The fix: min-width: 0 on the flex child that should be allowed to shrink. This explicit override removes the implicit minimum and lets flex-shrink do its job. Most common in chat UIs (long pasted URLs) and tables-as-flex.
min-width: auto. Add min-width: 0 to the offending child. This single fix saves more time than knowing all the rest of flexbox combined.Order: The Source-Order Reorderer
The order property on a flex child changes its visual position without changing source order. Default is 0; lower values come first, higher last. Pattern: a card with a label at the top of the visual layout but at the bottom of source order (for SEO/accessibility), use order: -1 on the label.
Use sparingly. order can confuse screen reader users (who read in source order) and keyboard users (whose Tab order follows source). Reorder visually only when source order would be wrong for non-visual reasons (semantics, document structure).
Pippa's Note
flex: 1 — fills the available width), send button on the right (flex: none — fixed icon size). Three lines of CSS. The conversation list is a flex column where every conversation row is flex: 0 0 auto (don't grow, don't shrink, take content size), with a min-width: 0 on the row's title so a long conversation title truncates with text-overflow: ellipsis instead of pushing the row wider.