What is Overflow in CSS: Explanation and Examples

In CSS, overflow controls what happens when content inside a box is too big to fit. It decides if extra content is clipped, scrollable, or visible outside the box.

How It Works

Imagine you have a box, like a photo frame, and you want to put a picture inside it. If the picture is bigger than the frame, you need to decide what to do with the parts that don't fit. This is exactly what overflow does in CSS for web elements.

When content inside an element is larger than the element's size, overflow tells the browser whether to hide the extra content, show scroll bars so you can move to see it, or let it spill outside the box. This helps keep your page neat or lets users access all content.

Example

This example shows a box with fixed size and content that is bigger. The overflow property is set to scroll so scroll bars appear to see all content.

css

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  width: 200px;
  height: 100px;
  border: 2px solid #333;
  overflow: scroll;
  padding: 10px;
  box-sizing: border-box;
}

.content {
  width: 300px;
  height: 150px;
  background-color: #cce5ff;
  padding: 5px;
}

/* HTML structure */
/* <div class="container">
     <div class="content">This content is bigger than the container box, so scroll bars appear.</div>
   </div> */

Output

A 200px by 100px box with a blue content area bigger than the box inside it. Scroll bars appear so you can move to see all the blue content.

When to Use

Use overflow when you want to control how extra content behaves inside a fixed-size area. For example:

• Creating scrollable boxes for text or images.
• Hiding parts of content that should not be visible.
• Preventing layout breakage when content is too large.

This is useful in menus, cards, modals, or any place where space is limited but content might vary.

Key Points

• overflow controls content that is too big for its container.
• Common values: visible, hidden, scroll, and auto.
• visible shows overflow outside the box; hidden clips it.
• scroll always shows scroll bars; auto shows them only if needed.
• Helps keep layouts clean and user-friendly.

Key Takeaways

overflow manages extra content inside fixed-size containers.

Use scroll or auto to add scroll bars for large content.

hidden clips content to keep it inside the box.

Choosing the right overflow value improves page layout and usability.