What is the difference between overflow: hidden and overflow: auto?

What is the difference between overflow: hidden and overflow: auto?

• A. Hidden shows scrollbars when content overflows.
• B. Auto hides content that overflows.
• C. Hidden hides overflow; Auto shows a scrollbar when necessary.
• D. Auto keeps content inside with no overflow.

Answer: (C)

Overflow handling determines what happens to content that doesn’t fit in its box. When you use hidden, any content that extends beyond the element’s boundaries is clipped and no scrollbars appear, so the overflowing part is simply invisible. With auto, scrollbars are added only if the content actually overflows the box; if everything fits, no scrollbar is shown, but if it doesn’t fit, you can scroll to see the rest. So the essential difference is: hidden hides the overflow entirely, while auto reveals a scrollbar only when there’s overflow. (If you need separate control on each axis, you can use overflow-x and overflow-y.)

Overflow handling determines what happens to content that doesn’t fit in its box. When you use hidden, any content that extends beyond the element’s boundaries is clipped and no scrollbars appear, so the overflowing part is simply invisible. With auto, scrollbars are added only if the content actually overflows the box; if everything fits, no scrollbar is shown, but if it doesn’t fit, you can scroll to see the rest. So the essential difference is: hidden hides the overflow entirely, while auto reveals a scrollbar only when there’s overflow. (If you need separate control on each axis, you can use overflow-x and overflow-y.)