CSS Layout

CSS Overflow

The CSS Overflow property controls what happens when content is too large to fit inside an element.

When the content exceeds an element's width or height, overflow determines whether the content should be:

Visible
Hidden
Scrollable
Automatically scrollable when needed

This property is especially useful for:

Fixed-size containers
Scrollable content areas
Tables and code blocks
Preventing layout breakage

Syntax

CSS Overflow Syntax

css

selector {
    overflow: value;
}

CSS Overflow Example

css

div {
    overflow: auto;
}

This adds scrollbars only when the content exceeds the container size.

Attributes

Value	Description	Example
visible	Default value; content overflows outside the element	overflow: visible;
hidden	Hides overflowing content	overflow: hidden;
scroll	Always shows scrollbars	overflow: scroll;
auto	Shows scrollbars only when needed	overflow: auto;
clip	Clips overflowing content without scrolling	overflow: clip;

Example

CSS Overflow Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Overflow Example</title>
    <style>
        .container {
            width: 300px;
            height: 100px;
            border: 2px solid black;
            overflow: auto;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
</body>
</html>

Output

Browser Output

css

A box of 300px width and 100px height will appear
The content inside the box will exceed its height
Scrollbars will appear automatically when needed
The page layout will remain intact

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Notes

visible is the default overflow value.
hidden cuts off content that exceeds the container.
scroll always displays scrollbars, even when unnecessary.
auto is the most commonly used value.

You can control horizontal and vertical overflow separately:

Overflow X and Y Example

css

overflow-x: auto;
overflow-y: hidden;

Overflow Comparison

Value	Content Visible	Scrollbar
visible	Yes	No
hidden	No	No
scroll	Yes	Always
auto	Yes	When Needed
clip	No	No

Conclusion

The CSS Overflow property helps manage content that exceeds an element's dimensions. By choosing the appropriate overflow value, you can create cleaner layouts, prevent content from breaking designs, and provide a better user experience through controlled scrolling and visibility.

PreviousCSS Float NextCSS Z-index