CSS Fundamentals

CSS Overflow

⏱ 8 min read📖 Beginner

The overflow property controls what happens when content is too big to fit inside its container — whether it spills out visibly, gets clipped, or becomes scrollable.

.box {
  overflow: hidden;
}

.movie-row {
  overflow-x: auto;
}

Let me ask you something.

Have you ever seen content on a website spilling outside its container? Text running past the edges of a box. An image breaking out of its card. A section that was supposed to be contained but just kept going.

That is an overflow problem. And it happens more often than you think — especially as your layouts get more complex and content starts coming from real data that you cannot always predict.

CSS gives you complete control over what happens when content is bigger than its container. Let me show you how.

What is Overflow

Overflow happens when the content inside an element is larger than the element itself.

By default the browser just lets the content spill out. It does not hide it or scroll it. It just overflows outside the box.

The text spills right out of the bottom of the box. The box stays 80px tall but the content ignores that and keeps going. That is the default overflow behavior. And most of the time it is not what you want.

overflow: visible

This is the default. Content overflows and is fully visible outside the element. You do not need to write it explicitly — it is just what the browser does if you do not set anything else.

Content spills out, fully visible. Sometimes this is intentional — like a tooltip or dropdown that needs to appear outside its parent container.

overflow: hidden

Setting overflow to hidden clips anything that goes outside the element. If content is bigger than the container it simply gets cut off and hidden from view.

The text gets cut off cleanly at the edge of the box. Whatever does not fit simply disappears.

You will use overflow: hidden constantly. Here are the most common situations.

Clipping images inside cards — when an image is slightly too big for its container, overflow: hidden keeps it neat inside the card boundaries.

Hiding content for animations — you can hide something outside a container then animate it sliding in.

💡

overflow: hidden combined with border-radius is one of the most useful combinations in CSS. When you round the corners of a container any content or image inside it still has sharp corners unless you add overflow: hidden. Adding it clips the content to the rounded shape of the container. This is how rounded image cards are made.

The image fills the card perfectly and the rounded corners clip it cleanly. That is exactly how Netflix movie thumbnail cards work.

overflow: scroll

Setting overflow to scroll adds a scrollbar to the element. The content stays inside the container but the user can scroll to see the rest of it.

A scrollbar appears on the element. The content stays inside and the user can scroll to read it all.

One thing to be aware of — overflow: scroll always shows the scrollbar even if the content fits inside. If the content is small enough to fit the scrollbar still appears but it is grayed out and not usable.

overflow: auto

Auto is the smarter version of scroll. It only shows a scrollbar when the content actually needs it. If everything fits inside the container no scrollbar appears. If the content overflows a scrollbar appears automatically.

The first box has no scrollbar because the content fits. The second box gets a scrollbar because it needs one.

💡

In almost every situation where you think you want overflow: scroll you actually want overflow: auto. It gives you scrolling when needed without the always-visible scrollbar when content fits. Auto is almost always the better choice.

Controlling Horizontal and Vertical Separately

You can control horizontal and vertical overflow independently using overflow-x and overflow-y.

Nothing spills out horizontally. But the user can scroll vertically to read the content.

This is useful for things like horizontal scrolling movie rows — which is exactly what we are about to build on our Netflix clone.

Building the Netflix Clone

Let us add a horizontal scrolling movie row to our Netflix clone. This is the Trending Now section you see on Netflix — a row of thumbnail cards that scrolls sideways.

The movie row now scrolls horizontally just like Netflix. Each card has overflow: hidden so the images are clipped cleanly to the rounded corners. The row itself has overflow-x: auto so a scrollbar only appears when needed. The page is really starting to look like the real thing.

In the next lesson I am going to show you Flexbox — the most powerful and most used layout tool in CSS. It is going to change the way you think about positioning everything on a page. Come on in.

Learn about Flexbox →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.