Overflow

The overflow property controls how content that overflows an element’s box is handled (displayed, hidden, or scrollable).

---

Main property

Table : Main property

Property	Description
overflow	Defines the overall overflow behavior (both horizontal and vertical).
overflow-x	Defines horizontal overflow behavior only.
overflow-y	Defines vertical overflow behavior only.

---

Possible values

Table : Possible values

Value	Description
visible (default)	Overflowing content remains visible.
hidden	Overflowing content is hidden (not accessible without scrolling).
scroll	Adds scrollbars (always visible, even if not needed).
auto	Adds scrollbars only when necessary.
clip	Clips content without scrollbars (stricter than hidden).

---

Example

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #333;
  overflow: auto;
}

Here, if the content overflows the box, a scrollbar is displayed automatically.

.container {
  width: 300px;
  height: 150px;
  overflow-x: scroll; /* forced horizontal scrollbar */
  overflow-y: hidden; /* vertical content hidden */
}

---

Special cases

1. overflow: clip

Clips the overflowing content without showing scrollbars.
Unlike hidden, it is not possible to scroll the content by other means (e.g., keyboard, programmatic scrolling).

.box {
  overflow: clip;
}

---

2. Interaction with scrollbars

overflow: auto and overflow: scroll can display a custom scrollbar via scrollbar-width (Firefox) or ::-webkit-scrollbar (Chrome/Safari/Edge).

overflow: hidden or clip remove any scrollbar.

---

Best practices

• Prefer overflow: auto for natural behavior.
• Use overflow: hidden or clip only if you want to block access to overflowing content.
• Always test with dynamic content (long text, large images) to avoid unexpected clipping.

---

Key takeaways

• overflow controls overflowing content by hiding, clipping, or enabling scrolling.
• overflow-x and overflow-y provide independent horizontal/vertical control.
• clip is a stricter version of hidden, with no scrolling possible.
• overflow is often combined with scrollbar customization.