display: flex changes the children, not the box
Three chips, flex: 1 on all of them, and the third one rendered as a sliver of nothing. Deleting one wrapper div fixed it.
The tray holds three chips. Two are direct children; the third was wrapped in a div by someone tidying up the markup, and it is now one level deeper than the other two.
Make all three chips sit in a single row across the tray, 200px wide each, edge to edge — and make them stay equal when the tray changes width.
The stylesheet you start with is the obvious first attempt. Run it and watch what the third chip does.
Hint
How many boxes are there between the tray and the chip that vanished, and which of them is the flex container looking at?
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="tray"><div class="chip a"></div><div class="chip b"></div><div class="group"><div class="chip c"></div></div></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; } .tray { width: 600px; height: 120px; background: #16161d; } .chip { height: 56px; background: #ffd166; } .b { background: #7bdff2; } .c { background: #b5e48c; }