Both panels shrink. One of them shrinks twice as hard.
Two panels, both flex-shrink: 1, in a rail 300px too narrow for them. They did not lose 150px each. One lost 200 and the other lost 100, and nothing in the stylesheet says so.
A 600px rail holding a 600px panel and a 300px panel. They want 900px between them, so 300px has to come off somewhere. Make them give up exactly the same 150px each — 450 and 150 — and keep the losses equal when the rail changes width. Leave the widths in the base stylesheet alone. Work out first *why* the default splits it 200/100, then undo it.
Hint
The default factors are already equal, and the losses are not — so the factor is not the only number in the sum. What else does each panel bring to it?
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="rail"><div class="panel big"></div><div class="panel small"></div></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; } .rail { width: 600px; height: 140px; padding: 30px 0; display: flex; background: #16161d; } .panel { height: 80px; } .big { width: 600px; background: #7bdff2; } .small { width: 300px; background: #b5e48c; }