CSS Overflow

Written by Swapnil RajaUpdated 30 Jul 2026

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: The supporting concepts are explained in Scroll Snap and Scroll Animations.

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;
}

PreviousCSS Float NextCSS Z-index

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;

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>

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

CSS Overflow

Syntax

Attributes

Example

Browser Support

Notes

Overflow Comparison

Conclusion