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
Which property is used to tell the browser what to do if the box's content is larger than the box itself?
CSS provides a property called overflow which tells the browser what to do if the box's content is 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 (default) |
hidden |
The content is clipped at the border and no scrollbars are visible |
scroll |
Scrollbars are always added, allowing users to scroll to see overflowing content |
auto |
Scrollbars appear only if content overflows |
Example
The following example demonstrates different overflow values −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 80px;
border: 2px solid green;
padding: 10px;
margin: 10px 0;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
.hidden {
overflow: hidden;
}
.visible {
overflow: visible;
}
</style>
</head>
<body>
<h3>Overflow: scroll</h3>
<div class="container scroll">
This is a lot of content that will definitely overflow the container box.
You can see scrollbars are always present regardless of content size.
</div>
<h3>Overflow: auto</h3>
<div class="container auto">
This content also overflows, but scrollbars only appear when needed.
This is usually the preferred option for most layouts.
</div>
<h3>Overflow: hidden</h3>
<div class="container hidden">
This content is clipped at the border. Any text that doesn't fit
within the container height is simply cut off and hidden.
</div>
</body>
</html>
Three green-bordered boxes appear: 1. First box shows permanent scrollbars for navigation 2. Second box shows scrollbars only when content overflows 3. Third box clips content at the border with no scrollbars
Conclusion
The overflow property is essential for controlling content that exceeds container boundaries. Use auto for responsive scrollbars or hidden to clip content cleanly.
Updated on: 2026-03-15T11:23:22+05:30
268 Views
Advertisements