CSS Overflow

The overflow property specifies whether to clip content or add scrollbars when an element's content is too big to fit in a specified area.

---

Overflow Values

1. visible (Default)

The overflow is not clipped. It renders outside the element's box.

div { overflow: visible; }

---

2. hidden

The overflow is clipped and becomes invisible.

div { overflow: hidden; }

---

3. scroll

The overflow is clipped, and a scrollbar is added (both horizontally and vertically) to see the rest of the content.

div { overflow: scroll; }

---

4. auto

Similar to scroll, but it adds scrollbars only when necessary.

div { overflow: auto; }

---

Overflow-X and Overflow-Y

You can control the overflow for specific directions (horizontal vs vertical) separately.

div {
    overflow-x: hidden; /* Hide horizontal scroll */
    overflow-y: scroll; /* Force vertical scroll */
}

---

---