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
What to do when an element's content might be larger than the amount of space allocated to it?
The CSS overflow property controls what happens when an element's content is too large to fit in the allocated space. This property allows you to specify whether content should be clipped, scrollable, or visible.
Syntax
selector {
overflow: value;
}
Possible Values
| Value | Description |
|---|---|
visible |
Content overflows the element's boundary (default) |
hidden |
Content is clipped and hidden |
scroll |
Adds scrollbars to view overflowing content |
auto |
Adds scrollbars only when needed |
Example: Using Scroll and Auto Values
The following example demonstrates how overflow: scroll and overflow: auto handle content that exceeds container dimensions −
<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
border: 2px solid green;
padding: 10px;
margin-top: 10px;
width: 300px;
height: 50px;
overflow: scroll;
}
.auto {
border: 2px solid green;
padding: 10px;
margin-top: 10px;
width: 300px;
height: 50px;
overflow: auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class="scroll">
This is Demo Content. This is Demo Content. This is Demo Content.
This is Demo Content. This is Demo Content. This is Demo Content.
This is Demo Content. This is Demo Content. This is Demo Content.
This is Demo Content. This is Demo Content. This is Demo Content.
</div>
<p>Example of auto value:</p>
<div class="auto">
This is Demo Content. This is Demo Content. This is Demo Content.
This is Demo Content. This is Demo Content. This is Demo Content.
This is Demo Content. This is Demo Content. This is Demo Content.
This is Demo Content. This is Demo Content. This is Demo Content.
</div>
</body>
</html>
Two green-bordered boxes appear. The first box (scroll) always shows scrollbars, while the second box (auto) only shows scrollbars when content overflows. Both boxes contain scrollable text content that exceeds the 50px height limit.
Conclusion
The overflow property effectively manages content that exceeds container dimensions. Use auto for clean layouts that show scrollbars only when needed, or scroll when you always want scrollbars visible.
Updated on: 2026-03-15T11:23:35+05:30
175 Views
Advertisements