Intermediate
A chat panel that scrolls without jumping
The .messages panel grows forever. Make it 200px tall (on screen) and let it scroll vertically when needed (never show a scrollbar when there's nothing to scroll).
Reserve space for the scrollbar so the messages don't shift sideways when it appears, and make programmatic scrolling smooth.
What Check tests
- The panel is about 200px tall on screen
- It scrolls vertically only when needed
- The messages really overflow, so the panel can scroll
- Space for the scrollbar is reserved
- Scrolling is smooth
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.