What is the use of overflow: auto? What is the difference between overflow: auto and overflow: scroll?

Q: What is the use of overflow: auto? What is the difference between overflow: auto and overflow: scroll?

`overflow: auto` automatically adds scrollbars **only when content overflows** the container. If the content fits, no scrollbars appear. `overflow: auto;` – Scrollbars appear only when the content overflows the container. `overflow: scroll;` – Scrollbars are always visible regardless of content size. Use `auto` for a cleaner UI with conditional scrollbars, and `scroll` when you want scrollbars to always be present. div.auto { width: 200px; height: 100px; border: 1px solid black; overflow: auto; } div.scroll { width: 200px; height: 100px; border: 1px solid black; overflow: scroll; } This content may overflow. Scrollbars appear only if needed. This content may overflow. Scrollbars are always visible.

Difficulty: 4/10

scroll behavior, layout overflow, UI performance

Understanding overflow: auto vs overflow: scroll in CSS

overflow: auto automatically adds scrollbars only when content overflows the container. If the content fits, no scrollbars appear.

Key Differences

1
overflow: auto; – Scrollbars appear only when the content overflows the container.
2
overflow: scroll; – Scrollbars are always visible regardless of content size.
3
Use auto for a cleaner UI with conditional scrollbars, and scroll when you want scrollbars to always be present.

Example: Auto vs Scroll

Scenario Questions

0-2 years experience

2-5 years experience

1Your modal dialog sometimes shows extra whitespace instead of scrolling when the content is long. The CSS uses overflow:auto. Walk me through how you'd debug this issue.

Follow-up Questions