CSS · Layout and visual systems
How does the overflow property work?
Short answer
overflow controls what happens when content exceeds a box, with visible, hidden, clip, scroll and auto values. It can create a block formatting context and a scroll container, which changes layout and sticky behaviour.
The default is visible, so content spills outside the box. The other values clip, scroll or do both. Setting overflow on one axis can affect the other because the spec computes visible to auto when the other axis is not visible.
.scroll {
overflow: auto;
max-height: 20rem;
}
.truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}Values and side effects
- visible lets content overflow
- hidden clips content but can still be scrolled programmatically
- clip clips content and does not create a scroll container
- scroll always shows scrollbars in classic scrollbar environments
- auto shows scrollbars only when needed
- overflow: hidden creates a block formatting context, which stops margin collapsing
Text truncation with ellipsis needs overflow hidden, white-space nowrap and text-overflow ellipsis together. For multi-line truncation, use line-clamp, which is widely supported but should still be treated as progressive enhancement.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between overflow hidden and clip?
- 2Why does text-overflow require white-space nowrap?
- 3How does overflow affect margin collapsing?
- 4Why can overflow-x and overflow-y interact unexpectedly?
Say it in the interview
Overflow decides whether content is visible, clipped or scrollable, and visible is the default. Hidden clips but still allows programmatic scrolling, while clip does not create a scroll container. Any value other than visible also creates a block formatting context, which changes margin collapsing. For truncation I need overflow hidden, nowrap and text-overflow together, and I avoid clipping focusable content.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.