What flex: 1 actually expands to
Three columns with three carefully chosen widths rendered exactly the same size. The widths were still in the stylesheet. Nothing had overridden them.
Three columns, 80px, 160px and 240px wide in the base stylesheet. Make them exactly equal — 200px each — filling the deck, and keep them equal when the deck changes width. You are not allowed to change the base stylesheet, and you should not need to. The widths are there deliberately: the right answer makes them irrelevant, and the answer most people write does not. The starter is that second answer. Look at what it renders.
Hint
Write out all three longhand values of the shorthand you are about to use. Which of them is the one doing the work here?
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="deck"><div class="col c1"></div><div class="col c2"></div><div class="col c3"></div></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; } .deck { width: 600px; height: 120px; background: #16161d; } .col { height: 64px; background: #ffd166; } .c1 { width: 80px; } .c2 { width: 160px; background: #7bdff2; } .c3 { width: 240px; background: #b5e48c; }