Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Working with CSS Overflow Property
The CSS overflow property controls what happens when content is larger than its container. It allows you to clip content, provide scrollbars, or let content extend beyond the container boundaries.
Syntax
selector {
overflow: value;
}
Possible Values
| Value | Description |
|---|---|
visible |
Default value. Content is not clipped and renders outside the element's box |
hidden |
Clips content that overflows. Clipped content is not visible |
scroll |
Clips content and adds scrollbars to view the overflow |
auto |
Automatically adds scrollbars only when content overflows |
Example: Overflow Auto
The auto value automatically adds scrollbars when content overflows −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 100px;
border: 2px solid #333;
overflow: auto;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
This is a long paragraph of text that will exceed the height of the container. When this happens, the overflow: auto property will automatically add scrollbars so users can scroll to see the hidden content.
</div>
</body>
</html>
A bordered container with scrollbars appears, allowing users to scroll through the overflowing text content.
Example: Overflow Scroll
The scroll value always shows scrollbars, even when content doesn't overflow −
<!DOCTYPE html>
<html>
<head>
<style>
.scroll-container {
width: 200px;
height: 100px;
border: 2px solid #666;
overflow: scroll;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="scroll-container">
This content has scrollbars visible even though the text might fit within the container boundaries.
</div>
</body>
</html>
A container with permanently visible scrollbars, regardless of content size.
Example: Overflow Hidden
The hidden value clips overflowing content without providing scrollbars −
<!DOCTYPE html>
<html>
<head>
<style>
.hidden-container {
width: 200px;
height: 80px;
border: 2px solid #999;
overflow: hidden;
padding: 10px;
margin: 20px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="hidden-container">
This is a long text that will be clipped when it exceeds the container height. The overflowing content will be completely hidden with no way to access it through scrolling.
</div>
</body>
</html>
A gray container that cuts off text at its boundaries with no scrollbars visible.
Conclusion
The overflow property is essential for controlling content flow in containers. Use auto for user-friendly scrolling, hidden to clip content, and scroll when you always want scrollbars visible.
Updated on: 2026-03-15T13:53:03+05:30
129 Views
Advertisements