The session row on Waypoint’s schedule is three things in a line: a time, a title and a save button. It looks fine until the content team schedules “Shipping Accessible Design Systems Across Twelve Product Teams Without Losing Your Mind”, and the save button slides off the edge of the card. Nothing in the CSS mentions widths, so where did the overflow come from?
\nFrom flexbox doing exactly what its algorithm says. Once you know the algorithm, this bug takes thirty seconds to fix.
\nFlexbox sizes items along the main axis in two passes:
\nflex-basis. With the default auto, that’s its width if set, otherwise its content width.flex-grow share it in proportion to their grow factors. If there’s too little, items with flex-shrink give some back, weighted by shrink factor times basis, so big items shrink more.The flex shorthand sets all three values, and its keywords are worth memorising because they behave very differently:
| Shorthand | \nExpands to | \nUse it for | \n
|---|---|---|
flex: 1 | \n1 1 0% | \nEqual columns, whatever the content | \n
flex: auto | \n1 1 auto | \nKeep content size, share only the extra | \n
flex: none | \n0 0 auto | \nNever grow or shrink (icons, buttons) | \n
flex: 0 0 5rem | \nfixed basis | \nA column of exact width | \n
min-width: auto trapBack to the runaway title. It has white-space: nowrap, so its content width is the whole sentence, maybe 700px. The row is 400px. Shrinking should solve it, so why doesn’t it?
Because flex items have min-width: auto by default, and for a flex item that means “no smaller than my min-content size”. Shrinking stops at that floor. The unbreakable title can’t shrink below its full width, so it overflows and drags the button with it.
.session-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.session-row .time { flex: 0 0 5rem; }\n.session-row .title {\n flex: 1;\n min-width: 0; /* allow shrinking below content size */\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.session-row .save { flex: none; }min-width: 0 removes the floor, and the three overflow properties turn the clipped text into a tidy ellipsis. The same trap appears with long URLs, code blocks and nested flex or grid containers, so this is a fix you’ll write many times.
Waypoint’s header holds the logo, the day switcher and a “Get tickets” link that belongs at the far end. justify-content: space-between would spread all three apart. An auto margin is more precise:
.site-header { display: flex; align-items: center; gap: 1rem; }\n.site-header .tickets { margin-inline-start: auto; }Auto margins on flex items absorb all free space on their side, so the link moves to the end and everything before it stays packed together. It’s the flexbox equivalent of “and then a spring”.
\nThe filter bar holds four track filters. On a wide screen they fit on one line; on a phone they shouldn’t be squeezed to unreadable slivers. Wrapping plus a basis gives you that with no breakpoint:
\n.filters {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n.filters > * {\n flex: 1 1 10rem;\n}Each filter wants 10rem. The browser fits as many 10rem items as it can on a line, wraps the rest, then lets each line’s items grow to fill it. At 25rem wide you get two per line; at 45rem, all four. The breakpoint is implied by the content.
\n\nThe exercise gives you a 400px session row with a very long title. Make the time a fixed 5rem column, let the title fill the remaining space and truncate with an ellipsis, and keep the save button at the end. When rows of cards need to line up in two dimensions, flexbox runs out of road; that’s where grid takes over in the next lesson.
\n","toc":[{"id":"sec-1","text":"How flexbox decides sizes","level":2},{"id":"sec-2","text":"The min-width: auto trap","level":2},{"id":"sec-3","text":"Push with auto margins","level":2},{"id":"sec-4","text":"Wrapping without media queries","level":2},{"id":"sec-5","text":"Your turn","level":2}],"takeaways":["Flexbox sizes items in two passes: each item starts at itsflex-basis, then leftover space is shared by flex-grow or a shortfall is taken back by flex-shrink.","flex: 1 means 1 1 0%, so items get equal shares regardless of content; flex: auto means 1 1 auto, so content size is kept and only the extra is shared.","Flex items default to min-width: auto, which stops them shrinking below their content; set min-width: 0 to let text truncate instead of overflowing.","An auto margin on a flex item absorbs all free space on that side, which is the cleanest way to push one item to the far end."],"further":[{"title":"Controlling ratios of flex items along the main axis (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios"},{"title":"flex (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex"},{"title":"Flexbox (web.dev Learn CSS)","url":"https://web.dev/learn/css/flexbox"}],"quiz":[{"q":"Three items with different text lengths sit in a 600px flex container. You want three equal 200px columns. Which declaration on the items does it?
","options":[{"text":"flex: auto","why":"auto means a basis of auto (the content size), so longer text starts wider and stays wider after the extra space is shared."},{"text":"flex-grow: 1","why":"This keeps the default flex-basis: auto, so items still start from their content width; only the leftover space is split evenly."},{"text":"flex: 1","why":"Correct. flex: 1 sets the basis to 0%, so all 600px is free space, shared equally by three items with grow 1."}],"answer":2},{"q":"A session title in a flex row is a long unbroken string with white-space: nowrap. It pushes the save button out of the card even though the title has flex: 1. What fixes it?
min-width: 0 (plus overflow: hidden) to the title.","why":"Correct. Flex items default to min-width: auto, which means “never smaller than my content”. Zero removes that floor, so the title can shrink and truncate."},{"text":"Add flex-shrink: 10 to the title.","why":"Shrink factors can’t take an item below its minimum size, and min-width: auto sets that minimum at the content width."},{"text":"Add flex-wrap: wrap to the row.","why":"Wrapping moves items onto new lines, but the title alone is still wider than the row, so it would still overflow."}],"answer":0},{"q":"In a header that is a flex row, how do you push the “Get tickets” link to the far right while the logo and nav stay left?
","options":[{"text":"justify-content: space-between on the header.","why":"That spreads every item apart, so the nav would float to the middle instead of staying next to the logo."},{"text":"margin-inline-start: auto on the link.","why":"Correct. An auto margin swallows all free space on that side, so the link moves to the end and the others stay packed at the start."},{"text":"float: right on the link.","why":"Floats have no effect on flex items; the flex container ignores float."},{"text":"justify-self: end on the link.","why":"justify-self does nothing in flexbox, because the main axis is shared by all items, not split into cells."}],"answer":1},{"q":".filters > * { flex: 1 1 10rem; } in a wrapping flex container 25rem wide with four filters. What happens?
The row is 400px wide, and the long title pushes the Save button out of it. Using flexbox properties on the items:
\n.time a fixed 5rem column that never grows or shrinks,.title take all remaining space and truncate with an ellipsis instead of overflowing,.save at its natural size at the end of the row.The row must not overflow, and the layout should still hold when the title is short.
\n","hints":["Something stops the title from shrinking below its text width. Which property sets that floor on flex items?","flex: 0 0 5rem gives a fixed column. flex: 1 plus min-width: 0 lets the title fill and shrink.","On .title: flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;. On .save: flex: none;."],"explanation":"Flex items have min-width: auto, which keeps them at least as wide as their content; with white-space: nowrap that is the whole sentence. min-width: 0 removes the floor so the title can shrink, and overflow: hidden with text-overflow: ellipsis turns the clipped text into …. flex: 0 0 5rem fixes the time column (a plain width: 5rem would still shrink), flex: 1 makes the title absorb leftover space even when it’s short, and flex: none stops the button from being squeezed.