The overflow property defines the behavior content which overflows the element box. This property only works for block elements that have a specified height.
It specifies whether the content should be clipped to fit in the box or scrollbars should be added on the element.
This is a shorthand for the following properties:
The content overflows when the container has a height and width set.
The overflow property has the following values:
- visible
- hidden
- scroll
- auto
- overlay
"Overlay" value is deprecated.
One of the uses of setting overflow is float clearing. However, setting overflow does not clear the float on the element. The element with overflow having a value other than "visible" will expand as large as it is needed to include floated child elements inside, supposing that the height isn’t declared.
The overflow property can also create a block formatting context. It is useful in the cases when we want to align a block element next to a floated element.
| Initial Value | visible |
| Applies to | Block containers, flex containers and grid containers. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | Object.style.overflow = "auto"; |
Syntax
overflow: visible | hidden | scroll | auto | overlay | initial | inherit;Example of the overflow property with the "visible" value:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: visible;
}
</style>
</head>
<body>
<h2>Overflow property example</h2>
<h3>overflow: visible</h3>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>Result
Example of the overflow property with the "scroll" value:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Overflow property example</h2>
<h3>overflow: scroll</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>In the following example, the applied value cuts the content to fit the box.
Example of the overflow property with the "hidden" value:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Overflow property example</h2>
<h3>overflow: hidden</h3>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>Example of the overflow property with the "auto" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.scroll {
width: 200px;
height: 300px;
border: 1px solid;
overflow: auto;
margin-bottom: 10px;
}
.scroll-x {
width: 200px;
height: 300px;
border: 1px solid;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 10px;
}
.scroll-y {
width: 200px;
height: 300px;
border: 1px solid;
overflow-y: auto;
margin-bottom: 10px;
}
.scroll>div {
width: 400px;
height: 50px;
background: #ccc;
}
.scroll-y>div {
width: 200px;
height: 50px;
background: #ccc;
}
.scroll-x>div {
width: 400px;
height: 50px;
background: #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Example with Overflow Property</h1>
<h2>overflow overflow scroll auto</h2>
<div class="scroll">
<h2>Overflow Property </h2>
<div>
<h2>overflow scroll property</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<h2>overflow overflow-x auto</h2>
<div class="scroll-x">
<h2>Overflow Property </h2>
<div>
<h2>overflow scroll-x property</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer.
</p>
</div>
<h2>overflow overflow-y auto</h2>
<div class="scroll-y">
<h2>Overflow Property </h2>
<div>
<h2>overflow scroll-y property</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. software like Aldus PageMaker including versions of Lorem Ipsum.but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body>
</html>Example of the overflow property with all the values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #eee;
width: 300px;
height: 200px;
overflow: scroll;
}
div.hidden {
background-color: #eee;
width: 300px;
height: 200px;
overflow: hidden;
}
div.auto {
background-color: #eee;
width: 300px;
height: 200px;
overflow: auto;
}
div.visible {
background-color: #eee;
width: 300px;
height: 200px;
overflow: visible;
}
div.overlay {
background-color: #eee;
width: 300px;
height: 200px;
overflow: overlay;
}
</style>
</head>
<body>
<h2>Overflow property example</h2>
<h3>overflow: scroll</h3>
<div class="scroll">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1 500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: hidden</h3>
<div class="hidden">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: auto</h3>
<div class="auto">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: visible</h3>
<div class="visible">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<br/>
<br/>
<h3>overflow: overlay</h3>
<div class="overlay">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| visible | The content is not clipped and renders outside the padding box. This is the default value of this property. | Play it » |
| hidden | The content is clipped to fit the padding box. | Play it » |
| scroll | The scrollbar is added to see the rest of the content. | Play it » |
| auto | Depends on the browser. If content overflows, scrollbar is added. | Play it » |
| overlay | Works the same as auto, but with the scrollbars drawn on top of content instead of taking up space.This deprecated value must not be used anymore, although it may still work. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |
Browser support
|
|
|
|
|
|---|---|---|---|---|
| 1.0+ | 12.0+ | 1.0+ | 1.0+ | 7.0+ |
Practice Your Knowledge
What does the CSS overflow property do?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.