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