What is the difference between overflow: auto and overflow: scroll in CSS ?
Last Updated :
22 Nov, 2022
In this article, we will understand the difference between the `scroll` & `auto` values for the overflow CSS shorthand property. The Overflow property specifies the preferred behaviors for an element’s overflow i.e., when the content of an element is too large to fit within its block formatting context in both directions. In simple words, it controls the behaviors of big content, that are displayed depending on the different device screen-width.
Overflow: scroll
This property value will add scroll bars in both horizontal or vertical directions, even when you don’t need a scrollbar, It will make scroll bars visible on the given element and hide all overflowing content. The scrollbars will still be present but disabled if the content does not overflow.
Syntax:
element {
overflow: scroll;
}
Example 1: This example describes the basic usage of CSS Overflow Property, where we have used the overflow: scroll property for all the <p> tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Difference between overflow: auto &
overflow: scroll Property
</title>
<style>
p {
width: 250px;
height: 100px;
border: 1px solid black;
overflow: scroll;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Overflow: scroll</h2>
<p>
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well explained
computer science and programming articles, etc
</p>
</body>
</html>
|
Output: From the below output, the text inside the <p> tag has scroll bars in both horizontal and vertical directions even when a horizontal scroll is not needed.
Overflow: scroll
Overflow: auto
This property value is generally used when the overflow is clipped & the scroll bar will be included automatically, in order to display the rest of the content. It is very similar to overflow: scroll, the only difference is that it will appear only when your element requires it and will assist you in getting rid of both scroll bars when not needed.
Syntax:
element {
overflow: auto;
}
Example 2: This example describes the basic usage of CSS Overflow Property, where we have used the ‘overflow: auto’ property for all the <p> tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Difference between overflow: auto &
overflow: scroll Property
</title>
<style>
p {
width: 250px;
height: 100px;
border: 1px solid black;
overflow: auto;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Overflow: auto</h2>
<p>
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well explained
computer science and programming articles, etc
</p>
</body>
</html>
|
Output: From the output, the text inside the <p> tag has a scroll bar only in the vertical direction and not present in the horizontal direction which is better than ‘overflow: scroll’.
Difference between overflow: scroll & overflow: auto:
overflow: scroll
|
overflow: auto
|
| It will hide all the content that is overflowing & it will add scroll bars always. |
It is similar to overflow: scroll, but only adds the scroll bars only when needed or when the content is overflowing. |
|
It doesn’t matter if the material overflows or not; it will always add horizontal and vertical scrolling.
|
If the content does not exceed the content boundary, no scrollbar is added; nevertheless, if the content exceeds the content boundary, a scrollbar is automatically added.
|
Share your thoughts in the comments
Please Login to comment...