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

flex: 2 deleted the flex-basis above it

MediumSizingF24

flex-basis: 300px on both cards, flex: 2 and flex: 1 under it, and the cards render 600 and 300 — a 2:1 split of the whole rail. The 300px base is nowhere in the result and nothing overrode it.

Two cards in a 900px rail. The base stylesheet gives them both flex-basis: 300px, so 600px is spoken for and 300px is surplus. Make the first card take two thirds of that surplus and the second one third — 500 and 400 — with both keeping their 300px base, and keep the split working when the rail changes width. The starter says exactly what you would say. Look at what it does to the basis.

Hint

Count the longhand properties inside the shorthand you just wrote. You supplied one value — what happened to the other two?

Live preview1100×320
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="rail"><div class="card a"></div><div class="card b"></div></div>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.rail { width: 900px; height: 140px; padding: 25px 0; display: flex; background: #16161d; }
.card { flex-basis: 300px; height: 90px; }
.a { background: #7bdff2; }
.b { background: #b5e48c; }