CSS

The overflow property in CSS controls how content is handled when it overflows (exceeds) its container.

---

1️⃣ Syntax

selector {
    overflow: visible | hidden | scroll | auto;
}

✅ Possible Values

Value	Description
visible	Default. Content overflows the box without clipping.
hidden	Hides overflowing content (no scrollbars).
scroll	Always shows scrollbars (even if content fits).
auto	Shows scrollbars only if needed.

📌 overflow works on elements with a fixed height or width.

---

2️⃣ Example: Overflow in Action

✅ Default (visible)

.box {
    width: 200px;
    height: 100px;
    border: 2px solid black;
    overflow: visible;
}

📝 The content will flow out of the box without clipping.

✅ Hiding Overflow (hidden)

.box {
    width: 200px;
    height: 100px;
    overflow: hidden;
}

📝 The overflowing content is clipped (not visible, no scrollbars).

✅ Scrollbars Always Visible (scroll)

.box {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

📝 Both horizontal and vertical scrollbars always appear.

✅ Auto Scroll (auto)

.box {
    width: 200px;
    height: 100px;
    overflow: auto;
}

📝 Scrollbars appear only if content overflows.

---

3️⃣ Overflow with overflow-x & overflow-y

✅ You can control horizontal and vertical overflow separately:

.box {
    overflow-x: hidden;  /* Hide horizontal overflow */
    overflow-y: scroll;  /* Enable vertical scrollbar */
}

• overflow-x → Controls horizontal overflow (hidden, scroll, auto)
• overflow-y → Controls vertical overflow (hidden, scroll, auto)

---

4️⃣ overflow: hidden; and position: absolute; Issue

⚠️ If overflow: hidden; is applied to a parent, child elements with position: absolute; cannot overflow outside the parent.

✅ Solution: Use overflow: visible; on the parent.

---

5️⃣ Prevent Scrollbar with overflow: clip; (New)

.box {
    overflow: clip;
}

📝 It works like hidden, but it removes the ability to scroll completely.

---

🎯 Summary

Property	Effect
overflow: visible;	Content overflows outside the container.
overflow: hidden;	Hides overflowing content (no scroll).
overflow: scroll;	Always shows scrollbars.
overflow: auto;	Shows scrollbars only if needed.
overflow-x/y	Controls overflow horizontally (x) and vertically (y).

🚀 Use overflow wisely to control content flow in your layout!