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
What is the difference between overflow: auto and overflow: scroll in CSS?
In CSS, the overflow property controls how content that exceeds an element's dimensions is handled. When content overflows, you can choose to show scrollbars automatically or always display them. The auto and scroll values provide different scrollbar behaviors.
In this tutorial, we will learn the difference between the auto and scroll values of the CSS overflow property.
Syntax
selector {
overflow: auto | scroll;
}
Overflow: auto
The overflow: auto property shows scrollbars only when the content actually overflows the container. If the content fits within the element's dimensions, no scrollbars appear.
Example 1: Content Overflows
In this example, the content height exceeds the div's height, so scrollbars appear
<!DOCTYPE html>
<html>
<head>
<style>
.auto-overflow {
height: 100px;
width: 300px;
overflow: auto;
border: 2px solid red;
padding: 10px;
}
</style>
</head>
<body>
<h3>overflow: auto (Content Overflows)</h3>
<div class="auto-overflow">
<p>TutorialsPoint!</p>
<p>TutorialsPoint!</p>
<p>TutorialsPoint!</p>
<p>TutorialsPoint!</p>
<p>TutorialsPoint!</p>
<p>TutorialsPoint!</p>
</div>
</body>
</html>
A red-bordered div with vertical scrollbars appears because the content exceeds the 100px height limit.
Example 2: Content Fits
When content fits within the container, no scrollbars appear
<!DOCTYPE html>
<html>
<head>
<style>
.auto-fits {
height: 150px;
width: 300px;
overflow: auto;
border: 2px solid red;
padding: 10px;
}
</style>
</head>
<body>
<h3>overflow: auto (Content Fits)</h3>
<div class="auto-fits">
<p>TutorialsPoint!</p>
<p>TutorialsPoint!</p>
</div>
</body>
</html>
A red-bordered div with no scrollbars appears because the content fits comfortably within the container.
Overflow: scroll
The overflow: scroll property always shows scrollbars, regardless of whether the content overflows or not. Both horizontal and vertical scrollbars are displayed even when not needed.
Example
This example shows scrollbars even when content fits within the container
<!DOCTYPE html>
<html>
<head>
<style>
.scroll-always {
height: 150px;
width: 300px;
overflow: scroll;
border: 2px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<h3>overflow: scroll</h3>
<div class="scroll-always">
<p>This content fits easily.</p>
<p>But scrollbars still appear.</p>
</div>
</body>
</html>
A blue-bordered div with both horizontal and vertical scrollbars visible, even though the content fits within the container.
Comparison
| overflow: auto | overflow: scroll |
|---|---|
| Shows scrollbars only when content overflows | Always shows scrollbars |
| Cleaner appearance when content fits | Consistent scrollbar presence |
| Better user experience for variable content | Prevents layout shifts |
Side-by-Side Comparison
This example demonstrates both properties with identical content
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
margin: 20px 0;
}
.box {
height: 120px;
width: 250px;
border: 2px solid;
padding: 10px;
}
.auto-box {
overflow: auto;
border-color: red;
}
.scroll-box {
overflow: scroll;
border-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="box auto-box">
<h4>overflow: auto</h4>
<p>Content fits nicely.</p>
<p>No scrollbars needed.</p>
</div>
<div class="box scroll-box">
<h4>overflow: scroll</h4>
<p>Same content size.</p>
<p>But scrollbars appear.</p>
</div>
</div>
</body>
</html>
Two side-by-side boxes: the red box (auto) shows no scrollbars, while the blue box (scroll) displays both horizontal and vertical scrollbars despite identical content.
Conclusion
Use overflow: auto for a cleaner interface that only shows scrollbars when needed. Use overflow: scroll when you want consistent scrollbar presence to prevent layout shifts or maintain visual consistency.
653 Views
