CSS overflow Property

The overflow property dictates how a container handles content that is too large to fit within its defined boundaries. It determines if the extra content should be displayed, hidden, or made accessible via scrollbars.

selector { overflow: value; }
visible Content is not clipped and may be rendered outside the padding box.
hidden Content is clipped and no scrollbars are provided to view the hidden content.
scroll Content is clipped and the browser always displays scrollbars regardless of whether content overflows.
auto Scrollbars are provided by the browser only if the content actually overflows the container.
clip Content is clipped to the element's inner bounds and no scrolling is allowed, even programmatically.

Code Examples

A basic example showing how to clip content that exceeds a container's fixed dimensions.

<div style="width: 200px; height: 100px; border: 2px solid #333; overflow: hidden;">
  This text is inside a small box. If there is too much text, the overflow: hidden property will ensure that the text does not spill out and ruin the layout of the rest of the page.
</div>

An advanced example using JavaScript to toggle the height of a scrollable container for a 'Read More' effect.

<div id="newsBox" style="width: 300px; height: 100px; overflow: auto; border: 1px solid #ccc; padding: 10px; transition: height 0.5s;">
  <p>This is a long article that requires scrolling to read the full content. We use JavaScript to toggle the height and overflow behavior to create a simple 'Read More' interaction.</p>
  <p>Additional content that would normally be hidden or require scrolling can be revealed by expanding the container height via script.</p>
</div>
<button onclick="toggleRead()" style="margin-top: 10px;">Toggle Expansion</button>

<script>
function toggleRead() {
  const box = document.getElementById("newsBox");
  if (box.style.height === "100px") {
    box.style.height = "300px";
    box.style.borderColor = "#007bff";
  } else {
    box.style.height = "100px";
    box.style.borderColor = "#cccccc";
  }
}
</script>

Pro Tip

You can use "overflow: hidden" on a parent container as a quick and dirty way to clear floated child elements without adding extra "clearfix" markup. It forces the parent to establish a new block formatting context, meaning it will wrap around its floated children. Also, for modern web apps, try "overflow: overlay" if you want the scrollbars to sit on top of the content rather than taking up space in the layout, though support varies by browser.

Deep Dive

Think of an element like a cardboard box. If you try to put a giant teddy bear in a small shoe box, the overflow property tells the browser what to do. By default, the bear's arms and legs just hang out (visible). If you set it to "hidden", the browser acts like a pair of scissors and trims off everything outside the box. When you use "scroll" or "auto", the box gets magic sliders that let the user see the whole bear without making the physical box any larger. This property is a core part of the box model and is essential for keeping your layouts from breaking when dynamic content gets too long or wide. It acts as a shorthand for overflow-x and overflow-y, allowing you to set both axes at once or provide two separate values for horizontal and vertical behavior.

Best Practices

Always prefer "auto" over "scroll" unless you have a specific design reason to show empty scrollbar tracks. Using "auto" keeps the interface clean by only appearing when necessary. Also, remember that overflow only works on block-level elements with a specified height or max-height. If your container is set to auto height, it will simply grow to fit the content, making the overflow property useless. When building layouts for mobile, ensure that your scrollable areas are large enough for thumb interaction.

Common Pitfalls

A common trap is using "overflow: hidden" to clear floats and then wondering why your box-shadow or absolute-positioned tooltips are being cut off. Anything that sits outside the border-box will be vaporized by "hidden". Another issue is the "scrollbar jump" where a page shifts slightly to the left when a scrollbar appears on a long page; you can mitigate this by using the "scrollbar-gutter" property or setting "overflow-y: scroll" on the body to keep the track permanent.

Accessibility

Content hidden with "overflow: hidden" is completely inaccessible to users, including those using screen readers, because the content is not reachable via scrolling. If you use "scroll" or "auto", make sure the container is keyboard accessible. By default, a div with a scrollbar cannot be focused with the Tab key. You should add "tabindex=0" to the scrollable container so keyboard users can use their arrow keys to navigate the content inside.

Dev Data Table: overflow property

default visible
animatable no
inherited no
experimental no
year_intro 1998
year_standard 1998
js_syntax_1 element.style.overflow = "hidden";
js_syntax_2 element.style.setProperty("overflow", "scroll");
js_note When manipulating overflow via JavaScript, you can also target the specific axes using overflowX and overflowY properties.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 7, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }
results render here...