CSS Basics

Colors & BG

Box Model

Text Styles

CSS Layout

CSS Effects

Advanced

CSS Overflow

❮ Previous Next ❯

CSS Overflow: Managing Content That Doesn't Fit

The CSS overflow property controls what happens to content that is too large to fit inside an element's designated box. It helps manage scrolling and the visibility of extra content.

Syntax and Property Values

Syntax:

element {
    overflow: visible | hidden | scroll | auto;
}

The overflow property can take the following values:

Value Description
visible Default. The content is not clipped and is visible outside the element's box.
hidden The overflow is clipped, and the rest of the content becomes invisible. No scrollbar is added.
scroll The overflow is clipped, but a scrollbar is always added (both horizontally and vertically) to see the rest of the content.
auto Similar to scroll, but it only adds a scrollbar when it is necessary (i.e., when the content actually overflows).

CSS Overflow Examples

Let's explore how each property works using practical examples. Note that for the overflow property to have an effect, the element must have a restricted height or width.

1. Overflow Auto

The overflow: auto; property automatically adds a scrollbar only when the content is larger than the box. This is generally the most preferred way to handle overflow.

Overflow Auto Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .auto-box {
            width: 200px;
            height: 60px;
            border: 2px solid navy;
            background-color: lightgray;
            padding: 5px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <h3>IntricateDevo: Overflow Auto</h3>
    <div class="auto-box">
        This is an example of CSS overflow. When the content inside the box is too long to fit within the fixed height of 60px, a scrollbar automatically appears to let you see the rest of the text.
    </div>
</body>
</html>

2. Overflow Visible

With overflow: visible;, the content spills out of the element's box and overlaps whatever is beneath it. This is the default behavior in CSS.

Overflow Visible Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .visible-box {
            width: 150px;
            height: 60px;
            border: 2px solid navy;
            background-color: lightblue;
            padding: 5px;
            overflow: visible;
            margin-bottom: 60px; /* Added margin so overlapping is visible */
        }
    </style>
</head>
<body>
    <h3>IntricateDevo: Overflow Visible</h3>
    <div class="visible-box">
        The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. Since this is visible, I will spill out of the navy box!
    </div>
</body>
</html>

3. Overflow Scroll

Setting overflow: scroll; forces a scrollbar to appear, regardless of whether the content actually overflows or not. This keeps the layout consistent but can look messy if scrollbars aren't needed.

Overflow Scroll Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .scroll-box {
            width: 150px;
            height: 80px;
            border: 2px solid brown;
            background-color: lightpink;
            padding: 5px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <h3>IntricateDevo: Overflow Scroll</h3>
    <div class="scroll-box">
        The CSS overflow controls big content. Scrollbars are always visible here!
    </div>
</body>
</html>

4. Overflow Hidden

The overflow: hidden; property simply cuts off any content that exceeds the element's dimensions. The extra content is completely hidden from the user, and no scrollbars are provided.

Overflow Hidden Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .hidden-box {
            width: 150px;
            height: 60px;
            border: 2px solid red;
            background-color: lightcoral;
            padding: 5px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <h3>IntricateDevo: Overflow Hidden</h3>
    <div class="hidden-box">
        The CSS overflow controls big content. You will not be able to read the rest of this sentence because it is hidden.
    </div>
</body>
</html>

Directional Overflow: overflow-x and overflow-y

Instead of applying overflow to both directions simultaneously, CSS allows you to manage horizontal and vertical overflows independently:

Overflow X and Y Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .directional-box {
            width: 150px;
            height: 60px;
            border: 2px solid purple;
            background-color: #f3e5f5;
            padding: 5px;
            /* Hide horizontally, scroll vertically */
            overflow-x: hidden;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <h3>IntricateDevo: Overflow X and Y</h3>
    <div class="directional-box">
        This box hides content horizontally but allows you to scroll vertically to see the rest of the text.
    </div>
</body>
</html>

Exercise

?

Which CSS overflow value adds a scrollbar ONLY if the content is too large to fit in the box?

❮ Previous Next ❯