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: overflow: scroll provides a scrolling mechanism even when content does not overflow. Whether a scrollbar remains visibly persistent still depends on the platform and the user's scrollbar settings.

2. Cross‑Axis Behaviour

• Changing overflow-x can sometimes affect overflow-y and vice versa. For example:
  • Setting overflow-x: scroll can be accompanied by vertical overflow. If one axis is scroll, auto, or hidden, visible on the other axis computes to auto. A classic horizontal scrollbar can also reduce the available content area and create vertical overflow; overlay scrollbars may not consume that space.
  • This happens because scrollbars occupy space within the container, and browsers calculate the layout accordingly.

Fix: Set both axes deliberately and allow for the platform's scrollbar behaviour. box-sizing: border-box changes how padding and borders contribute to a declared size; it does not stop a scrollbar consuming space inside the box.

3. overflow: hidden and Accessibility

• Using overflow: hidden can clip a focused link or button from view even though it remains in the keyboard sequence.
• Focus may then appear to have vanished, and hidden content can remain exposed to assistive technologies without being visible on screen.

Fix: Keep focusable content visible, or remove its controls from interaction while the content is hidden. Do not put aria-hidden="true" on a container that still contains focusable descendants: that hides them from the accessibility tree without removing keyboard focus.

4. Mobile Scrolling Issues

• On older mobile browsers, including older iOS releases, overflow-y: scroll or auto could feel jerky because nested scrolling did not always use native momentum.

Historical fix: When this article was published, -webkit-overflow-scrolling: touch was commonly used for momentum scrolling on older iOS versions. Modern iOS scrolls overflow regions with momentum by default, so test the devices you support before retaining the declaration.

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: Use overflow: scroll when you want a scrolling mechanism available regardless of content size. Whether the scrollbar is persistently visible depends on the platform and user settings.
  • auto: Use overflow: auto when a scrolling mechanism should be provided only if content overflows. A platform may use overlay scrollbars that appear only during interaction.
• 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.