Teaching step

The scroll pane that will not scroll

HardThe min-width:auto floorF40

overflow-y: auto on the pane, a fixed-height shell around it, 900px of content inside it — and no scrollbar. The whole app grew instead, and the bottom of the list is somewhere below the window.

A 420px app shell: a 60px bar, then a middle box, then a scroll pane holding 900px of content. Make the middle box and the pane both 360px tall — what the bar leaves — with the content inside the pane still a full 900px, so there is something to scroll to. Keep it right when the shell's height changes. The pane is already overflow-y: auto. It is not the problem. Look one level up.

Hint

The main axis here runs downwards. Which property refused to yield in the last two problems, and what is it called when you turn the axis on its side?

Live preview800×560

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="app"><div class="bar"></div><div class="body"><div class="pane"><div class="filler"></div></div></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.app { width: 420px; height: 420px; display: flex; flex-direction: column; background: #16161d; }
.bar { flex: none; height: 60px; background: #7bdff2; }
.body { flex: 1; background: #1b3a44; }
.pane { height: 100%; overflow-y: auto; background: #242430; }
.filler { height: 900px; background: repeating-linear-gradient(#b5e48c 0 24px, #99d98c 24px 48px); }