Inspect the working example
The row reserves 40px for a tag and 8px for the gap. The filename gets the remaining 192px. min-width:0 permits shrinking; overflow-wrap:anywhere keeps the entire token readable.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Filename width | 240−40−8 | 192px |
| Tag width | Inspect fixed flex basis | 40px |
| Text integrity | Read full filename after wrapping | All original characters remain |
Follow the browser mechanism
The automatic minimum of a flex item can prevent an unbroken token from shrinking. Explicit min-width:0 removes that floor for this item; wrapping then handles the text inside the smaller box. Neither rule truncates the data. The tag also permits wrapping when text is enlarged.
The automatic minimum can force overflow
The alternative restores the automatic minimum and normal wrapping for the filename.
<style>body{margin:8px}</style>
<style>.row{display:flex;width:240px;gap:8px}.name{flex:1;overflow-wrap:normal}.tag{flex:0 0 40px}</style><section class="row"><p class="name">workshop_source_filename_without_spaces.html</p><p class="tag">HTML</p></section>The supplied long token pushes content beyond the 240px row. Hiding overflow would conceal the ending instead of restoring a readable layout.
Try the repair
Can overflow:hidden prove that all filename characters are visible?
Show the worked answer
No. It can hide content outside the box. Verify wrapping, retained text and actual scroll width instead.
- Measure 192px, 40px and an 8px gap rather than estimate from a screenshot.
- Inspect the whole token at enlarged text size.