CSS Overflow

When the content inside an element is larger than the element's defined size, the content overflows. The overflow property in CSS controls what happens to this overflowing content — whether it is hidden, shown as-is, or made scrollable.

Overflow typically occurs when a fixed height is set on a container but the content inside grows beyond it, or when a long unbreakable word or image is wider than its container.

CSS Overflow Properties

overflow Values

1. overflow: visible (Default)

Content that overflows is displayed outside the element's box without being clipped. The element itself does not change in size, but the extra content spills out.

.box {
    width: 150px;
    height: 80px;
    overflow: visible;  /* Extra content flows outside the box — default behavior */
    border: 1px solid black;
}

2. overflow: hidden

Content that overflows is clipped. Any content outside the element's box is invisible to the user. No scrollbar appears.

.box {
    width: 150px;
    height: 80px;
    overflow: hidden;  /* Extra content is cut off — not visible */
    border: 1px solid #333;
}

Common uses: hiding overflow for rounded corners, truncating text (with text-overflow: ellipsis), preventing child elements from showing outside a parent, and clearing floats.

3. overflow: scroll

Scrollbars are always visible, even if the content fits inside the box. The user can scroll to see overflowing content.

.box {
    width: 200px;
    height: 120px;
    overflow: scroll;  /* Always shows scrollbars */
    border: 1px solid #999;
}

4. overflow: auto

Scrollbars appear only when needed — when the content actually overflows. If the content fits, no scrollbar is shown. This is usually preferable to scroll.

.content-box {
    width: 200px;
    height: 150px;
    overflow: auto;   /* Scrollbar appears only if content overflows */
    border: 1px solid #ccc;
    padding: 10px;
}

overflow-x and overflow-y

These properties control overflow independently for each axis.

.code-block {
    overflow-x: auto;   /* Horizontal scroll when code is too wide */
    overflow-y: hidden; /* No vertical overflow */
    white-space: nowrap;  /* Prevents code from wrapping to next line */
    background-color: #1e1e1e;
    color: #dcdcdc;
    padding: 16px;
    font-family: monospace;
}

.sidebar {
    height: 400px;
    overflow-y: auto;   /* Vertical scroll in the sidebar */
    overflow-x: hidden; /* No horizontal scroll */
}

Practical Examples

Truncating Long Text with Ellipsis

.card-title {
    width: 220px;
    white-space: nowrap;      /* Prevent text from wrapping */
    overflow: hidden;          /* Hide the overflowing text */
    text-overflow: ellipsis;  /* Show "..." at the cut-off point */
}

Scrollable Content Area

.news-feed {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    padding: 10px;
    background-color: #fafafa;
}

Responsive Code Block

pre {
    overflow-x: auto;
    background-color: #f4f4f4;
    padding: 16px;
    border-radius: 6px;
    font-size: 14px;
    white-space: pre;
}

Using overflow: hidden to Clear Floated Children

.parent {
    overflow: hidden;  /* Forces parent to wrap around floated children */
    background-color: #f0f4f8;
}

.floated-child {
    float: left;
    width: 200px;
}

Summary

The overflow property manages what happens when content exceeds its container's dimensions. visible (default) allows content to spill out. hidden clips overflowing content without a scrollbar. scroll always shows scrollbars, while auto shows them only when needed — making auto the preferred choice in most cases. overflow-x and overflow-y provide fine-grained control over each direction independently.