Structure of Adhaar Number. How is Adhaar number alloted?

CSS overflow को समझें, एकदम विस्तार से उदाहरण लेकर, इसका प्रैक्टिकल प्रयोग कैसे करेंगे?

आइए CSS overflow को बिल्कुल basic से advanced + practical use तक समझते हैं, ताकि हम इसे Blogger / website / layout design में confidently use कर सकें।

---

1️⃣ CSS overflow क्या है?

जब किसी container (div, section, box) के अंदर का content
उसकी तय की गई height / width से बाहर निकल जाता है, तो उसे overflow कहते हैं।

👉 CSS overflow property यह तय करती है कि
extra content के साथ क्या किया जाए।

---

Real-life उदाहरण

मान लीजिए आपके पास एक डिब्बा है:

• डिब्बा छोटा है
• सामान ज्यादा है

अब आपके पास 4 विकल्प हैं:

1. सामान बाहर गिरने दो
2. सामान छुपा दो
3. स्क्रॉल लगाओ
4. जरूरत पड़ने पर ही स्क्रॉल दिखाओ

यही काम CSS overflow करता है।

---

2️⃣ overflow के प्रकार

Value	काम
visible	बाहर निकलने दो (default)
hidden	बाहर का content छुपा दो
scroll	हमेशा scrollbar दिखाओ
auto	जरूरत हो तभी scrollbar दिखाओ

---

3️⃣ overflow: visible (Default)

Code

<div class="box visible">
  यह बहुत लंबा text है जो बॉक्स से बाहर निकल जाएगा।
</div>

.box {
  width: 200px;
  height: 60px;
  border: 2px solid black;
}

.visible {
  overflow: visible;
}

Output

• Text box से बाहर दिखेगा
• Layout बिगड़ सकता है ❌

कब use करें?

✔ Rare cases
✔ Tooltip, dropdown जैसी चीजों में

---

4️⃣ overflow: hidden

Code

.hidden {
  overflow: hidden;
}

क्या होगा?

• जो बाहर निकलेगा → कट जाएगा
• Scroll नहीं दिखेगा

Practical Use 🔥

✅ Image crop
✅ Card design
✅ Animation में clean edges

Example (Image crop)

.image-box {
  width: 200px;
  height: 120px;
  overflow: hidden;
}

---

5️⃣ overflow: scroll

Code

.scroll {
  overflow: scroll;
}

क्या होगा?

• हमेशा scrollbar दिखेगा
• चाहे content छोटा हो या बड़ा

❌ UX खराब लगता है
❌ Mobile पर अच्छा नहीं

कब use करें?

✔ Rare technical cases

---

6️⃣ overflow: auto (सबसे ज़्यादा उपयोग)

Code

.auto {
  overflow: auto;
}

क्या होगा?

• Content बड़ा → scrollbar दिखेगा
• Content छोटा → scrollbar नहीं

Practical Use 🔥🔥

✅ Blog content
✅ Comment box
✅ Code block
✅ Sidebar

---

7️⃣ overflow-x और overflow-y

आप horizontal और vertical अलग-अलग control कर सकते हैं।

.box {
  overflow-x: auto;
  overflow-y: hidden;
}

Use Case

• Horizontal scroll table
• Vertical fixed height text

---

8️⃣ Blogger / Website में Practical Example

📌 Fixed height content box

.post-summary {
  height: 150px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #ccc;
}

✔ Blog preview
✔ Long description
✔ Notes section

---

📌 Horizontal scroll table (Mobile friendly)

.table-wrap {
  overflow-x: auto;
}

<div class="table-wrap">
  <table>...</table>
</div>

🔥 बहुत important trick (mobile के लिए)

---

9️⃣ Overflow + Position (Important)

.parent {
  overflow: hidden;
}

.child {
  position: absolute;
}

⚠️ overflow: hidden parent में हो तो
👉 child का बाहर निकला भाग कट जाएगा

✔ Modal / slider design में ध्यान रखें

---

🔟 Common Mistakes ❌

❌ height दिए बिना overflow expect करना
❌ overflow: hidden से content छुपा देना
❌ mobile scroll भूल जाना
❌ scroll का overuse

---

1️⃣1️⃣ Cheat Sheet 🧠

overflow: hidden;  /* crop */
overflow: auto;    /* smart scroll */
overflow-x: auto;  /* horizontal */
overflow-y: scroll;/* vertical */

---

1️⃣2️⃣ Summary (एक लाइन में)

CSS overflow layout को साफ, scrollable और user-friendly बनाता है

---

🔴 CSS overflow कब काम नहीं करता?

1️⃣ जब height या max-height ही नहीं दी हो

❌ गलत सोच

overflow auto लगाने से अपने आप scroll आ जाएगा

❌ गलत code

.box {
  overflow: auto;
}

✔ सही बात

👉 जब तक height / max-height तय नहीं होगी,
content को overflow होने का मौका ही नहीं मिलेगा।

✔ सही code

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

🧠 Rule:

Overflow तभी काम करता है जब container की सीमा तय हो

---

2️⃣ Inline elements (span, a) पर overflow

❌ Overflow काम नहीं करेगा

span {
  overflow: hidden;
}

कारण

• span, a, strong → inline elements
• Inline elements की width / height fix नहीं होती

✔ Solution

span {
  display: inline-block;
  width: 100px;
  overflow: hidden;
}

---

3️⃣ position: absolute element में overflow expect करना

❌ गलत expectation

.child {
  position: absolute;
  overflow: auto;
}

क्यों?

• Absolute element parent flow से बाहर होता है
• अगर height defined नहीं है → overflow fail

✔ Fix

.child {
  position: absolute;
  height: 120px;
  overflow: auto;
}

---

4️⃣ Parent में overflow: hidden लगा होना

Example

.parent {
  overflow: hidden;
}

.child {
  position: absolute;
  top: 100%;
}

Result

👉 Child का बाहर निकला हिस्सा कट जाएगा

🧠 Rule:

Parent का overflow child को control करता है

---

5️⃣ Flexbox में overflow काम न करना (बहुत common 🔥)

❌ Problem code

.parent {
  display: flex;
}

.child {
  overflow: auto;
}

क्यों नहीं?

Flex item default में:

min-height: auto;

जिससे overflow trigger नहीं होता।

✔ Fix (MOST IMPORTANT)

.child {
  min-height: 0;
  overflow: auto;
}

🔥 यह real-world bug है, Blogger layouts में भी।

---

6️⃣ Grid layout में भी यही issue

.grid {
  display: grid;
}

Fix

.grid-item {
  min-height: 0;
  overflow: auto;
}

---

7️⃣ overflow: hidden से scroll expect करना

❌ गलत expectation

overflow: hidden;

👉 Scroll कभी नहीं आएगा

✔ Scroll चाहिए तो:

overflow: auto;

---

8️⃣ Body / HTML overflow confusion

कभी-कभी scroll नहीं दिखता क्योंकि:

body {
  overflow: hidden;
}

✔ Fix

body {
  overflow-y: auto;
}

---

9️⃣ Mobile browsers में overflow issues

Problem

• height: 100% काम नहीं करता

✔ Correct

height: 100vh;
overflow: auto;

---

🔥 One-Line Golden Rules

1️⃣ Height नहीं → overflow नहीं
2️⃣ Inline element → overflow नहीं
3️⃣ Flex/Grid → min-height: 0 जरूरी
4️⃣ Parent hidden → child cut
5️⃣ hidden ≠ scroll
6️⃣ Mobile में vh use करो

---

🧠 Quick Debug Checklist

✔ Height दी?
✔ Element block / inline-block है?
✔ Parent overflow hidden तो नहीं?
✔ Flex/Grid में min-height: 0 लगाया?
✔ Scroll expect तो auto लगाया?