wtf(css)layout you can see happening
← wtf(css)
Build it

Drop the chips so they stack up from the floor

EasyMain axis vs cross axis

Chips are appended to the well in play order, and they pile up from the top like a list instead of falling to the bottom like a stack.

The chips are in play order in the markup: .c1, .c2, .c3. Render .c1 on the floor of the well with .c2 on top of it and .c3 on top of that, with the stack resting on the bottom edge.

Hint

A column has a main axis too. What does reversing it do to which end is the start?

Live preview1000×700
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="well"><div class="chip c1"></div><div class="chip c2"></div><div class="chip c3"></div></div>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; }
.well { width: 140px; height: 320px; background: #16161d; display: flex; flex-direction: column; }
.chip { width: 140px; height: 60px; }
.c1 { background: #ff7ab6; }
.c2 { background: #7cd4a0; }
.c3 { background: #ffd166; }