CSS, with the layout showing

Forty steps through flexbox, twenty-two builds that fail unless several concepts are right at once, and the famous wtfs underneath — margin collapsing, stacking contexts, and the invisible wall inside every flex item. This is the one subject where the output IS the picture, so every problem is rendered rather than described.

Problems

13 problems

All topics Advanced Alignment Distributing space Gap Main axis vs cross axis Making a flex container Order Sizing The famous WTFs The min-width:auto floor Wrapping and the align-content trap

Easy Medium Hard|Teaching step Predict the render Build it Explain the wtf

#	title	topic	type	difficulty
1	The centred box you cannot scroll to	Distributing space	Teaching step	Hard
2	Both panels shrink. One of them shrinks twice as hard.	Sizing	Teaching step	Hard
3	The last row that will not line up	Wrapping and the align-content trap	Teaching step	Hard
4	Breaking a flex line where you want it	Wrapping and the align-content trap	Teaching step	Hard
5	The flex item that refuses to shrink	The min-width:auto floor	Teaching step	Hard
6	The truncation that will not truncate	The min-width:auto floor	Teaching step	Hard
7	The scroll pane that will not scroll	The min-width:auto floor	Teaching step	Hard
8	The Flexbox Holy Albatross	Advanced	Teaching step	Hard
9	Margin collapsing, and the margin that escapes	The famous WTFs	Explain the wtf	Hard
10	Block formatting contexts	The famous WTFs	Explain the wtf	Hard
11	z-index: 9999 doesn't work	The famous WTFs	Explain the wtf	Hard
12	Percentage padding resolves against width — even vertically	The famous WTFs	Explain the wtf	Hard
13	display: contents removes the box	The famous WTFs	Explain the wtf	Hard

44 of 87 catalogue topics are authored, with 37 drills rehearsing them. Every one of them is judged: each carries a starter that has been shown to fail, at least two different correct answers that have been shown to pass, and a set of near-misses and cheats that have been shown to be caught. Nothing reaches this list until all of that holds.