CSS Overflow: scroll and auto

When content is too long for a box and you want people to be able to read all of it, use a scrollbar.

scroll

Always shows scrollbars, whether or not they are needed (on systems that use classic scrollbars).

auto

Shows scrollbars only when the content overflows. This is nearly always what you want.

1
2
3
4
5
6
7
8
9
10

<style>
  .box { width: 200px; height: 80px; border: 2px solid #d94a00; padding: 6px; margin-right: 12px; display: inline-block; vertical-align: top; }
  .s { overflow: scroll; }
  .a { overflow: auto; }
</style>
<div class="box s"><b>scroll</b>: short text.</div>
<div class="box a"><b>auto</b>: short text, so no scrollbar.</div>
<br><br>
<div class="box s"><b>scroll</b>: this is a longer piece of text that does not fit in the box, so the scrollbar can be used to read it all.</div>
<div class="box a"><b>auto</b>: this is a longer piece of text that does not fit in the box, so a scrollbar appears only now.</div>

Good uses

• A chat window, a log, or a terminal-like box with a limited height.
• A code block with long lines: pre { overflow: auto; }.
• A modal dialog with a lot of content: max-height: 80vh; overflow: auto.
• A wide table: see Responsive Tables.

A tip about keyboard access

A scrollable box should be reachable with the keyboard. In most browsers a box with overflow: auto that has no focusable child may not be scrollable by keyboard. If the content is a plain text area, add tabindex="0" to the box and give it an accessible label.