Hey there!

Utterly confused what this is and why it exists? We've all been there.

Click any adventure to explore various features in Chrome DevTools. Every demo provides instructions and learning material for you to get started.

This site is using Google Analytics for us to better understand how you interact with the provided demos, in accordance to our Privacy Policy.

Explore more demos
A tipped over water bottle spilling water on a desk with a laptop in the background.
Overflow
  1. Familiarize yourself with the layout of this page by scrolling up and down.
  2. Read through the little stories to learn about bugs to fix.
  3. Use AI assistance for styling to get rid of the unintentional scrollbars.

developer.chrome.com

AI assistance

MDN

Overflowing content

web.dev

Learn CSS: Overflow

Oceanic Overflow

Our deep-sea explorer has encountered a squeeze. Due to tricky layout issues, they've been pushed beyond the viewport. Your mission: diagnose and resolve the overflow. Help them safely exploring the digital coral reefs, by fixing the a container's width.

A little scuba diver called Jec.

Liquid Logistics: Too Many Bottles!

Someone's really thirsty! Our layout has been flooded with an absurd number of water bottles, pushing them beyond the viewable area. Use your CSS skills to manage this hydration hysteria. Diagnose the overflow, and adjust a containers flex properties to bring the excessive bottles back into a sensible arrangement.

1
2
3
4
5
6
7
8
9
10

That's a wrap!

That's all there is to this demo. Want to check out another one?