How does overflow: auto affect block size?
overflow: auto does not change the block's size by itself. The block stays the size set by width/height or calculated by the browser. Its effect is different: if the content extends beyond the content area, the browser enables scrolling (scrollbars) only when needed.
Behavior:
- if the content fits, there is no scroll, the block looks normal
- if the content overflows, vertical and/or horizontal scrolling appears
- the block's size does not grow to fit the content, as happens with
overflow: visible
Comparison for clarity
| Property | Behavior |
|---|---|
visible (default) | The block stretches to fit the content |
hidden | Extra content is hidden, no scrolling |
scroll | Scrolling always shows, even if the content fits |
auto | Scrolling only when needed, the block does not grow |
Summary: overflow: auto keeps the block's dimensions and adds scrolling if the content overflows.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.