The CSS overflow Property

The overflow property in CSS controls what happens to content when it exceeds the size of its container. It's a very basic principle of CSS but, perhaps surprisingly, one that many don't fully understand. This came back across my radar recently whilst working with a junior developer, so it seemed like a good opportunity to write the details down.

Whether you're dealing with a text box, an image, or any other content, overflow helps us determine how to handle that excess content efficiently.

What Is the overflow Property?

The overflow property defines how content that extends beyond the container's dimensions is managed. It offers multiple options for either hiding, clipping, or enabling scrollbars for the overflowing content.

Syntax:

overflow: visible | hidden | scroll | auto;

Values of overflow

Each value of overflow provides a unique behaviour for managing excess content:

• visible (this is default): Content overflows the container and is fully visible outside its boundaries.
• hidden: Content that overflows is hidden (clipped). No scrollbars appear.
• scroll: Scrollbars are always displayed, regardless of whether content overflows or not.
• auto: Scrollbars appear only if content overflows the container.

Controlling Horizontal and Vertical overflow

For more granular control, CSS also provides overflow‑x and overflow‑y so that we can independently manage horizontal and vertical overflow:

.container {  width: 200px;  height: 100px;  /* Horizontal overflow hidden */  overflow-x: hidden;  /* Vertical overflow always scrollable */  overflow-y: scroll;}

Gotchas and Unexpected Behaviours

As with anything in CSS, there are a couple of unexpected or counterintuitive behaviours that are worth being aware of.

1. Scrollbars and overflow: auto

• When we're using overflow: auto, scrollbars will only appear if the content exceeds the container dimensions. However, on some systems (e.g., macOS with default settings and a touch pad), scrollbars might only appear during user interaction (like scrolling), which can be confusing, especially when it comes to testing ‑ somebody using a Windows machine with a mouse might see something quite different to a user on a MacBook.

Fix: If you need a consistent appearance, you can always use overflow: scroll instead, although this then means that scrollbars will always show, even when they're not needed.

2. Cross‑Axis Behaviour

• Changing overflow‑x can sometimes affect overflow‑y and vice versa. For example:
  • Setting overflow‑x: scroll may inadvertently trigger a vertical scrollbar if the browser adjusts the height and flow of the content to accommodate the horizontal scrollbar.
  • This happens because scrollbars occupy space within the container, and browsers calculate the layout accordingly.

Fix: Use box‑sizing: border‑box on the container to ensure scrollbars don't affect content dimensions.

3. overflow: hidden and Accessibility

• It is possible to inadvertently trap focus inside the container if it contains interactive elements (e.g., links or buttons) whilst using overflow: hidden.
• This means that users of assistive technologies like screen readers or keyboard navigation users may not realise that there's more content outside of the visible area.

Fix: If you are hiding content temporarily, consider using ARIA attributes like aria‑hidden="true" to offer more context to assistive technologies.

4. Mobile Scrolling Issues

• On mobile devices, when using overflow‑y: scroll or auto, you may find that the scrolling behaviour feels jerky or inconsistent due to in‑browser optimisations or the lack of native momentum scrolling.

Fix: Add ‑webkit‑overflow‑scrolling: touch to enable smoother scrolling on iOS devices.

5. Collapsing Scrollbars in Certain Browsers

• In some browsers (e.g., older versions of Chrome or Safari), setting overflow‑x: hidden can cause the container's height to collapse if the content has no inherent height.

Fix: Use min‑height or explicitly set a height for the container to avoid unexpected layout issues.

6. Overlapping Content with overflow: visible

• When using overflow: visible, the overflowing content can overlap neighbouring elements which may potentially break the layout or cause visual clutter.

Fix: Use z‑index and positioning carefully to ensure the overflowing content doesn't unintentionally block or interfere with other parts of the page.

Wrapping up

The overflow property is an essential tool for managing content flow within a container, it offers us the flexibility to handle excess content however we prefer (i.e.: clipping, scrolling, or letting it spill out).

Key Takeaways

• The overflow property controls how content that exceeds the container's dimensions is managed.
• Values include:
  • visible: If you want the content to simply overflow beyond the container, use overflow: visible. This is useful for decorative effects or when the design calls for content to intentionally spill out.
  • hidden: If you need to clip excess content and prevent it from being seen, use overflow: hidden. This is ideal for masking extra content, such as in sliders or cropped images.
  • scroll: If you want scrollbars to always be available regardless of content size, use overflow: scroll. This ensures consistent scrollbar availability, like in fixed‑height containers. However, it also means that the scrollbars will always be visible, even if the content does not exceed the container.
  • auto: If you want scrollbars to appear only when content exceeds the container's size, use overflow: auto. This is common for responsive layouts or dynamic content sections.
• Use overflow‑x and overflow‑y for more specific control over horizontal and vertical overflows.

By understanding the different behaviours of overflow, we can better handle excess content and create layouts that adapt gracefully to different scenarios.