155

When I was studying the overflow property's values, I came across these two values: auto and scroll, which adds scrollbar(s) if the content overflows the element.

Could someone please explain me whats the difference between them?

alex
  • 479,566
  • 201
  • 878
  • 984
GirishK
  • 1,823
  • 3
  • 16
  • 23

6 Answers6

228

Auto will only show a scrollbar when any content is clipped.

Scroll will however always show the scrollbar even if all content fits and you cant scroll it.

Johan Davidsson
  • 2,852
  • 2
  • 19
  • 27
  • 3
    There doesn't seem to be a difference, on the latest version of Safari at least: Even with `scroll`, I don't see the scrollbar if the content fits. But, just to be safe, I went with `auto` because I only want to show a scrollbar when the content is clipped. – ma11hew28 Nov 05 '12 at 14:37
  • 3
    @MattDiPasquale OS X and Windows display scrollbars in different ways. You are probably using Safari on Mac right? OS X often hides the scrollbar until you actually scroll. – Johan Davidsson Mar 26 '13 at 10:50
  • 1
    There seems to be more difference than that, `overlow: scroll` makes the box thinner: http://jsbin.com/letog/2/edit – Dmitri Zaitsev Apr 17 '14 at 14:15
  • 1
    In Safari 12 (probably earlier versions too), unless scroll bars are configured to show always, `overflow: scroll` and `overflow: auto` are functionally identical when the container is large enough to contain the content. – Luke Worth Apr 20 '19 at 23:20
  • Same for Firefox, at least for Version 114.0.2, functionality seems to be identical with both. – Akaisteph7 Jul 05 '23 at 16:00
26

overflow: scroll will hide all overflowing content and cause scroll bars to appear on the element in question. If the content does not overflow, the scrollbars will still be visible, but disabled.

overflow: auto is very similar, but the scrollbars only appear when the content is overflowing.

There is a similar explanation of this here, with some screenshots to illustrate the point.

Stefano Saitta
  • 1,844
  • 1
  • 19
  • 34
James Allardice
  • 164,175
  • 21
  • 332
  • 312
3

Take a look at CSS Tricks.

Auto will show scrollbar if and only if the content overflows; but scroll will always show the scrollbar, whether the content is overflowing or not.

Stefano Saitta
  • 1,844
  • 1
  • 19
  • 34
samir chauhan
  • 1,543
  • 1
  • 17
  • 42
1

Adding a point to the answer, Overflow:auto not worked in IE7 when position of the container is absolute Position relative overflow IE7. But setting Overflow:scroll works

Kira
  • 1,403
  • 1
  • 17
  • 46
0

overflow: scroll will show both horizontal and vertical scrollbar even when you don't need one or other. while, overflow: auto will show the scrollbar which your div needs. so basically auto will help you to get rid of both scollbar. Here is more of that:

https://css-tricks.com/the-css-overflow-property/

manish joshi
  • 55
  • 2
  • 8
-1

In Windows, overflow: scroll will always show the scrollbar and overflow: auto will show the scrollbar only if the content is overflowing. In macOS, the overflow: scroll and overflow: auto will always show the scrollbar if the content is overflowing. Tested in Chrome. I highly recommend using overflow: auto as it works the same way and does not generate problems in windows

Diego Fernando Castro
  • 11
  • 2
    Welcome to Stack Overflow. Please be sure to read all existing answers before providing your own, to ensure that you don't just repeat information that's already been provided. – TylerH Aug 12 '20 at 20:50