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
Values of CSS overflow property
CSS provides a property called overflow that tells the browser what to do if the box's contents are larger than the box itself.
Syntax
selector {
overflow: value;
}
Possible Values
| Value | Description |
|---|---|
visible |
Allows the content to overflow the borders of its containing element |
hidden |
The content is cut off at the border and no scrollbars are visible |
scroll |
Scrollbars are added to allow scrolling through the content |
auto |
Scrollbars appear only if the content overflows |
Example: Visible Overflow
The following example demonstrates the visible value where content overflows outside the container −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 100px;
border: 2px solid #333;
background-color: #f0f0f0;
overflow: visible;
}
.content {
width: 250px;
height: 120px;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">This content is larger than its container and overflows outside the borders.</div>
</div>
</body>
</html>
A gray container with a green content box that extends beyond the container's borders, showing the overflowing content.
Example: Hidden Overflow
The following example shows how hidden clips the overflowing content −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 100px;
border: 2px solid #333;
background-color: #f0f0f0;
overflow: hidden;
}
.content {
width: 250px;
height: 120px;
background-color: #FF6B6B;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">This content is larger than its container but will be clipped at the container's borders.</div>
</div>
</body>
</html>
A gray container with red content that is cut off at the container's borders. No scrollbars are visible.
Example: Scroll Overflow
The following example demonstrates the scroll value which always shows scrollbars −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 100px;
border: 2px solid #333;
background-color: #f0f0f0;
overflow: scroll;
}
.content {
width: 250px;
height: 120px;
background-color: #3498DB;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">This content can be scrolled to view the parts that extend beyond the container.</div>
</div>
</body>
</html>
A gray container with blue content and visible horizontal and vertical scrollbars for navigating through the overflowing content.
Example: Auto Overflow
The following example shows the auto value which displays scrollbars only when needed −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 100px;
border: 2px solid #333;
background-color: #f0f0f0;
overflow: auto;
}
.content {
width: 250px;
height: 120px;
background-color: #9B59B6;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">This content triggers scrollbars only because it overflows the container.</div>
</div>
</body>
</html>
A gray container with purple content and scrollbars that appear automatically because the content overflows.
Conclusion
The CSS overflow property controls how content that exceeds its container is handled. Use visible to show all content, hidden to clip excess content, or auto for smart scrollbar management.
Updated on: 2026-03-15T11:23:56+05:30
156 Views
Advertisements