Restrict use of overflow: hidden to explicit, intentional cases
Introduction
overflow: hidden clips content to an element's bounds and prevents users from revealing overflow through scrolling, even though the content still exists and may be accessed programmatically. Because this can impact layout behaviour, interaction, and debuggability, its usage must be intentional.
Decision
Only use overflow: hidden to intentionally clip visual overflow, with a clear and documented reason.
It must not be used to:
- Serve as a default fix for layout problems.
- Hide scrollbars without addressing the underlying cause.
- Constrain overflow on high-level layout containers unless the need is explicit and documented.
Context
overflow: hidden prevents content from rendering outside of an element's box. While useful, it can hide important content, interfere with focus outlines, and mask underlying layout bugs. Historically, it has been overused to "fix" issues such as unwanted scrollbars, without addressing root causes.
Consequences
- Potentially more time spent debugging layout issues.
Exceptions
- Intentional visual clipping e.g. rounded image corners.
- Controlled animation effects where off-screen content must not be visible.