wtf(css)layout you can see happening
← wtf(css)
Teaching step

flex-grow distributes the surplus, not the container

EasySizingF20

flex-grow: 2 on the featured column was supposed to make it twice the size of the others. It came out 1.5×, and no amount of staring at the number explained why.

Three tiles, each 100px wide to begin with, in a 700px strip. Fill the strip. The third tile takes twice the share the other two take. That is not the same sentence as "the third tile is twice as wide", and the difference is the point — the correct answer here is 200, 200 and 300. The starter renders the answer most people expect. Compare it with the one that is asked for.

Hint

How much space is actually left over once all three tiles have taken their starting 100px — and what is being divided into shares, the strip or that leftover?

Live preview1000×340
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="strip"><div class="tile t1"></div><div class="tile t2"></div><div class="tile t3"></div></div>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.strip { width: 700px; height: 120px; background: #16161d; }
.tile { width: 100px; height: 56px; background: #ffd166; }
.t2 { background: #7bdff2; }
.t3 { background: #b5e48c; }