What Is Overflow in CSS, and How Does It Work?

CSS’da Overflow nima va u qanday ishlaydi?

— bu element ichidagi kontent (matn, rasm va hokazo) uning o‘lchamidan oshib ketganda, brauzer bu holatni qanday boshqarishini bildiradi.

Masalan, div element ichidagi matn uning chegarasidan chiqib ketishi mumkin.

Overflow ikki o‘lchamli bo‘ladi:

• x-o‘qi — gorizontal overflow
• y-o‘qi — vertikal overflow

Misol: overflow muammosini hal qilish

Keling, misolda overflow-y CSS xossasi yordamida muammoni hal qilamiz.

<link rel="stylesheet" href="styles.css" />

<div>
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

div {
  height: 200px;
  overflow-y: hidden;
}

👉 Bu overflow muammosini hal qiladi, lekin ortiqcha kontent butunlay ko‘rinmay qoladi va unga yetib bo‘lmaydi.

2️⃣ Scroll qo‘shish (scroll)

div {
  height: 200px;
  overflow-y: scroll;
}

👉 Endi element scrollable (aylanadigan) bo‘ladi va barcha kontentni ko‘rish mumkin.

Bu scroll sahifa scrollidan mustaqil ishlaydi.

3️⃣ Avtomatik boshqarish (auto)

Brauzerning o‘zi kerak bo‘lsa scroll qo‘shishi uchun auto qiymatidan ham foydalanish mumkin.

Muhim eslatma ⚠️

• Vertikal scroll — odatda normal va qabul qilinadi
• Gorizontal scroll — ko‘pincha yomon dizayn qarori hisoblanadi

Shu bilimlar yordamida siz kontentning qanday chiqib ketishini boshqarishingiz va sahifa layout’ini yaxshiroq nazorat qilishingiz mumkin.

Savollar (Questions)

1️⃣ CSS’da overflow nimani anglatadi?

• Element ota konteyneridan tashqariga joylashganda
• ✅ Kontent konteyner o‘lchamidan oshib ketganda
• Sahifada juda ko‘p element bo‘lganda
• CSS stillari bir-biri bilan to‘qnashganda

2️⃣ Vertikal overflow’ni boshqarish uchun qaysi CSS xossasi ishlatiladi?

• overflow
• overflow-x
• ✅ overflow-y
• vertical-overflow

3️⃣ Darsga ko‘ra, qaysi turdagi overflow ko‘proq qabul qilinadi?

• Gorizontal overflow
• ✅ Vertikal overflow
• Ikkalasi ham teng qabul qilinadi
• Ikkalasi ham qabul qilinmaydi