Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the difference between overflow: auto and overflow: scroll in CSS?
In CSS, the ‘overflow’ property is used to specify the overflow of the content of the HTML element. For example, if the height of the div element is ‘500px’, and the height of the inside content is ‘1000px’, we need to make the content scrollable.
In this tutorial, we will learn the difference between the ‘auto’ and ‘scroll’ values of the CSS ‘overflow’ property.
Overflow: auto in CSS
In CSS, overflow: auto sets the overflow of the HTML element to auto. It means if the content of the div is overflowing, it sets the ‘scroll’ as a value of the overflow property; Otherwise, it sets the ‘none’ as a value of the overflow property.
Syntax
Users can follow the syntax below to use the overflow: auto CSS property.
overflow: auto;
Example
In the example below, we have created the HTML div element and given the ‘main’ class name. Also, we have set the fixed width and height for the div element. Furthermore, we set the ‘overflow: auto’ CSS property
In the output, users can observe that it shows the scrollbar as content dimensions are more than the div element’s dimension.
<html>
<head>
<style>
.main {
height: 100px;
width: 500px;
font-size: 1rem;
overflow: auto;
border: 2px solid red;
}
</style>
</head>
<body>
<h2> <i> overflow: auto </i> in CSS </h2>
<div class = "main">
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
</div>
</body>
</html>
Example
In the example below, the dimensions of the insider content of the div element are less than the div element’s dimensions. In the output, users can observe that the div element is not scrollable, as the content is not overflowing.
<html>
<head>
<style>
.main {
height: 200px;
width: 100px;
font-size: 1rem;
overflow: auto;
border: 2px solid red;
}
</style>
</head>
<body>
<h2> <i> overflow: auto </i> in CSS </h2>
<div class = "main">
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
<p> TutorialsPoint! </p>
</div>
</body>
</html>
Overflow: scroll in CSS
The ‘overflow: scroll’ always shows the scrollbar in the HTML element, even if the element's content is not overflowing, and it always shows the horizontal and vertical scrollbars.
Syntax
Overflow: scroll;
Example
In the example below, we have added content to the div element that fits into the div element's dimensions. Also, we set the ‘overflow: scroll’ for the div element using the CSS.
In the output, users can observe that it shows the scrollbar even if the content of the div element is not overflowing.
<html>
<head>
<style>
.main {
height: 200px;
width: 300px;
font-size: 1rem;
overflow: scroll;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2> <i> overflow: scroll </i> in CSS </h2>
<div class = "main">
<p> This is a content. </p>
<p> This is a content. </p>
<p> This is a content. </p>
<p> This is a content. </p>
</div>
</body>
</html>
Difference between overflow: auto and overflow: scroll
Here is the difference table for overflow: auto and overflow: scroll CSS properties.
overflow: auto |
Overflow: scroll |
|---|---|
It shows a scrollbar only when the content of the HTML element is overflowing or doesn’t fit the original element's dimensions. |
It always shows the scrollbar. |
Example
In the example below, we have demonstrated the output of the overflow: scroll and overflow: auto together. We have set the overflow: scroll for the div element with the class name ‘scroll’ and overflow: auto for the div element with the class name ‘auto’.
In the output, users can observe that overflow: scroll shows the scrollbar but not overflow: auto.
<html>
<head>
<style>
.scroll {
height: 220px;
width: 500px;
font-size: 1rem;
overflow: scroll;
border: 2px solid blue;
}
.auto {
height: 200px;
width: 500px;
overflow: auto;
border: 3px dotted red;
margin: 10px;
}
</style>
</head>
<body>
<h2> Difference between overflow: scroll and overflow: auto in CSS</h2>
<div class = "scroll">
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
<p> overflow: scroll. </p>
</div>
<div class = "auto">
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
<p> overflow: auto. </p>
</div>
</body>
</html>
Users learned the difference between ‘overflow: auto’ and ‘overflow: scroll’ CSS properties. The only difference between both is when it shows a scrollbar.
294 Views
