Detailed explanation
The CSS overflow property controls what happens when content extends beyond an element’s padding box. This can happen when a container has a constrained height, when text cannot wrap, or when a child is wider than its parent. The four values differ mainly in whether excess content remains visible and whether users can scroll to reach it. Overflow is especially useful for panels, tables, menus, and layouts that must handle unpredictable content without covering nearby elements.
The initial value, visible, allows content to paint outside the box without providing scrolling. The element does not grow simply because its content spills out, so the overflow can overlap neighbouring content. With hidden, content outside the clipping area is not displayed and no scrollbars are provided. However, hidden does not remove that content from the document: the element is still a scroll container, and JavaScript or navigation to a focused descendant can change its scroll position. This distinction matters when explaining why hidden is not equivalent to making overflowing content completely inaccessible.
With scroll, the element becomes a scroll container and requests scrollbars even when its content fits. With auto, scrolling is provided when content overflows, and scrollbars normally appear only when needed. Actual scrollbar visibility depends on browser and operating-system settings; overlay scrollbars may disappear until scrolling occurs. Therefore, “scroll always shows scrollbars” is a useful beginner summary, but not an absolute visual guarantee. Neither value forces content to overflow; both define how the browser handles it when it does.
You can control axes separately using overflow-x and overflow-y. For example, .panel { max-height: 300px; overflow-y: auto; } lets a panel grow up to 300px, then scroll vertically when necessary. Meanwhile, .clip { overflow: hidden; } clips content that exceeds the box. For ordinary block containers, hidden, scroll, and auto also establish a block formatting context, unlike visible. Interviewers usually expect clear value comparisons, a practical example, and awareness that vertical scrolling generally needs a height constraint; without one, a normal block often expands to fit its content.
Key points to remember
- visible is the initial value: content can extend outside the box without creating a scroll container.
- hidden clips overflow and provides no scrolling UI, but programmatic scrolling remains possible.
- scroll requests scrollbars whether or not content overflows; platform settings affect their visibility.
- auto provides scrolling when needed, normally showing scrollbars only for overflowing content.
- Use overflow-x and overflow-y for separate axis control, and constrain dimensions where necessary.
Common mistakes candidates make
- Saying hidden deletes overflowing content or prevents every form of scrolling.
- Expecting overflow-y: auto to create vertical scrolling when the container can freely grow with its content.
- Claiming scroll guarantees permanently visible scrollbars on every browser and operating system.
Likely follow-up questions
What is the difference between overflow: hidden and overflow: clip?
Both clip content, but hidden creates a scroll container and allows programmatic scrolling, whereas clip does not. Unlike hidden, clip does not establish a block formatting context on its own.
Why is my panel not scrolling with overflow-y: auto?
Check whether its content actually exceeds its available height; an unconstrained block usually expands instead. In flex or grid layouts, a relevant item's automatic minimum size can also prevent shrinking, so min-height: 0 may be needed.
Can I use overflow-x: visible with overflow-y: auto?
You can write that combination, but visible computes to auto when the other axis is neither visible nor clip. Consequently, horizontal overflow will not simply spill out as you might expect.
Interview tip: Compare the four values in terms of clipping and scrolling, then explain the max-height panel example.