Overflow scroll and auto

Learn overflow: scroll and auto values.

Always scroll: overflow: scroll

The overflow: scroll value does not clip the spill; instead, it adds a scrollbar. The bar appears even when the content is small. The user can then scroll to see the hidden part.

This behavior brings consistency to some designs: when the box should always stay the same size and the bar should always sit there, scroll is the pick. The downside is that the bar shows up unnecessarily and may look heavy.

Scroll on demand: overflow: auto

The overflow: auto value lets the browser decide. When content fits, no bar appears; when content spills, a bar is added automatically. In most cases auto is the preferred choice.

For example, if you cap a notes list with max-height: 200px, a short list shows no bar; a long list sprouts one and scrolls. This strikes a pleasant balance of form and function.

Exercise Scroll the long list on demand

Write a .list class selector and add an overflow: auto declaration inside it. A short list shows no bar; a long one gains one automatically.

Show example solution

/* scroll the long list */
.list {
  overflow: auto;
}

Test yourself

What is the difference between scroll and auto?
```
.a { overflow: scroll; }
.b { overflow: auto; }
```
- scroll clips, auto shows
- scroll always shows a bar, auto only when content overflows
- auto always shows a bar, scroll only when it overflows
- They are the same; only the names differ
Show answer

scroll always shows a bar, auto only when content overflows — Correct. scroll always shows a bar; auto shows a bar only when content overflows.

Scroll the list on demand

.list {
  ____;
}

Show answer

.list {
  overflow: auto;
}

Match each value to its behavior

scroll

Always adds a bar
auto

Bar only when it spills
hidden

Clips the spill
visible

Leaves the spill

Next lesson: Z-index

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies