DEV Community

Cover image for CSS Overflow — Hidden, Scroll & Auto Explained
Ozan Yıldırım
Ozan Yıldırım

Posted on

CSS Overflow — Hidden, Scroll & Auto Explained

#overflowhidden #minicourse #csstips #cssoverflow

Ever had content spill out of its container and break your layout? The CSS Overflow property controls what happens when content is larger than its container. Whether you want to hide overflow, add scrollbars, or let the browser decide, mastering Overflow helps you build clean, controlled designs. In this MiniCoursey quick guide, you’ll learn how overflow works, the differences between hidden, scroll, and auto, and when to use each option to keep your layouts tidy.

What is the Overflow Property?
Overflow tells the browser what to do when an element’s content is too big to fit inside its box. By default, content that overflows just spills out. With Overflow, you can hide it, clip it, or make it scrollable.

Overflow: Hidden
overflow: hidden; cuts off any content that goes outside the container’s box. This is useful for sliders, cards, or images you want to crop.

.container {
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

Overflow: Scroll
overflow: scroll; always shows scrollbars — even if they’re not needed. This guarantees the user can scroll to see hidden content.

.container {
  overflow: scroll;
}
Enter fullscreen mode Exit fullscreen mode

Overflow: Auto
overflow: auto; shows scrollbars only when the content overflows. This is the most common option for flexible, clean layouts.

.container {
  overflow: auto;
}
Enter fullscreen mode Exit fullscreen mode

💡 Pro Tip: You can set overflow for X and Y directions separately with overflow-x and overflow-y.

⚠️ Common Mistake: Using overflow: hidden can hide important content — make sure it’s intentional!

FAQ
Q: What’s the default overflow?
A: visible — content just spills outside the box if it’s too big.

Q: Can I make a scrollable div?
A: Yes! Use overflow: auto or overflow: scroll plus a fixed height or width.

Related Link
👉 Check out previous: CSS Float Property — What It Is & When to Use It

Where to Learn More
Play with overflow on different containers. MDN’s Overflow docs have clear visuals and examples for tricky cases like scroll shadows and hidden content.

Conclusion
Congrats — you now know how to handle overflowing content with CSS! This small detail keeps your layouts clean, usable, and looking polished.

✨ Bookmark MiniCoursey for more quick & free mini courses!

Top comments (0)