Overflow controls what happens when content exceeds container bounds.
Useful values
visible(default)hidden(clips content)auto(scrollbars when needed)scroll(always scrollbars)
Production checklist
- Prefer
overflow:autofor data-heavy panels/tables. - Avoid clipping focused elements accidentally.
- Check touch scrolling behavior on mobile containers.
Important interview questions and answers
- Q: Why can sticky fail in overflow containers?
A: Scroll container boundaries alter sticky behavior expectations. - Q: Risk of
overflow:hidden?
A: Can hide focus rings, tooltips, and important dynamic content. - Q: Horizontal table strategy?
A: Wrap table inoverflow-x:autocontainer.
Pitfall: Check cascade order—author stylesheet loses to inline styles and !important surprises.