Inspect the working example
Three tool labels each reserve 120px. The row is 250px with a 10px gap and wrapping enabled. Two items need exactly 250px; the third must start a new line.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| First line | 120+10+120 | 250px; Editor and Browser share a line |
| Third item | Inspect Inspector top position | Starts on the next flex line |
| Narrower boundary | Change row width to 249px | All three items occupy separate lines |
Follow the browser mechanism
Flex line collection accounts for item sizes and gaps. flex:0 0 120px prevents these samples from shrinking, so the boundary is clear. The layout is a width experiment, not an instruction to hardcode every real toolbar to these sizes.
Ignoring the gap predicts the wrong fit
The alternative reduces the container by one pixel while keeping both widths and the gap.
<style>body{margin:8px}</style>
<style>.tools{display:flex;flex-wrap:wrap;width:249px;gap:10px}.tools p{margin:0;flex:0 0 120px}</style><section class="tools"><p>Editor</p><p>Browser</p><p>Inspector</p></section>120+120 seems to fit, but the required 10px gap makes 250px. The measured layout therefore has three lines.
Try the repair
What minimum width fits all three fixed items on one line?
Show the worked answer
380px: three 120px items plus two 10px gaps.
- Compare item top coordinates before and after the boundary.
- Count gaps between items, not one extra gap at each outer edge.