CssHow-ToBeginner · 3 min read

How to Use Overflow Hidden in CSS: Simple Guide

Use overflow: hidden; in CSS to hide any content that goes outside the boundaries of an element. This prevents scrollbars from appearing and clips the extra content, keeping your layout clean.

📐

Syntax

The overflow property controls what happens to content that is too big for its container. Using overflow: hidden; hides any content that extends beyond the container's edges.

overflow: The CSS property.
hidden: The value that clips overflow content and hides scrollbars.

css

selector {
  overflow: hidden;
}

💻

Example

This example shows a box with fixed width and height. The text inside is longer than the box, but with overflow: hidden;, the extra text is clipped and not visible.

css

html, body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.box {
  width: 200px;
  height: 100px;
  border: 2px solid #333;
  overflow: hidden;
  padding: 10px;
  background-color: #f0f0f0;
  box-sizing: border-box;
}

Output

<div class="box">This is a box with a fixed size. The text inside is longer than the box, but the extra part is hidden and not shown.</div>

⚠️

Common Pitfalls

One common mistake is expecting overflow: hidden; to add scrollbars. It actually hides overflow content without scrolling. Also, if the container has no fixed size, overflow hidden may not clip anything.

Another issue is using it on inline elements, which do not support overflow properly.

css

/* Wrong: no fixed size, so overflow hidden has no effect */
.container {
  overflow: hidden;
  border: 1px solid black;
}

/* Right: fixed size clips overflow */
.container-fixed {
  width: 150px;
  height: 50px;
  overflow: hidden;
  border: 1px solid black;
}

📊

Quick Reference

Use on block or flex containers with fixed size.
Hides overflow content without scrollbars.
Good for clean layouts and hiding scrollbars.
Not for showing scrollable content.

✅

Key Takeaways

Use overflow: hidden; to clip and hide content outside an element's box.

Set a fixed width and height on the container for overflow hidden to work effectively.

Overflow hidden hides scrollbars; it does not add scrolling.

Avoid using overflow hidden on inline elements as it may not work as expected.

Great for controlling layout and preventing unwanted scrollbars.