Teaching step

The truncation that will not truncate

HardThe min-width:auto floorF39

white-space: nowrap, overflow: hidden, text-overflow: ellipsis — all three present, all three correct, and the path still runs straight out of the card and shoves the badge off the end. Adding min-width: 0 fixed nothing.

A file-path label between a flexible container and a fixed 200px badge. The truncation styles are already in the base stylesheet and they are not the problem. Make the flexible box and the label both 400px — the 600px row minus the badge — so the path is forced to truncate, and keep it right when the row changes width. There are two flex containers in this fixture. That is the whole puzzle.

Hint

Which elements here are flex ITEMS? Count them again, and notice that one box is on both lists.

Live preview1000×300

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="row"><div class="grow"><div class="label"><div class="text">/Users/you/Projects/really-quite-long-path/src/components/Thing.tsx</div></div></div><div class="badge"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; font: 15px/1.4 ui-monospace, monospace; }
.row { width: 600px; height: 96px; display: flex; align-items: center; background: #16161d; }
.grow { display: flex; align-items: center; height: 64px; background: #1b3a44; }
.label { height: 40px; background: #7bdff2; }
.text { width: 480px; max-width: 100%; padding: 0 12px; line-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0b0b0f; }
.badge { flex: none; width: 200px; height: 64px; background: #b5e48c; }