overflow

خاصية فائض المحتوى overflow

خاصية overflow تقرر مصير المحتوى الذي يتجاوز حجم حاويته: يظهر خارجها، يُقص، أو يكسب شريط تمرير.

عندما يكبر المحتوى عن صندوقه: visible الافتراضية تتركه يفيض خارجًا (فوضى)، وhidden يقصه بصمت، وauto الذهبية تُظهر شريط تمرير فقط عند الحاجة، وscroll يظهره دائمًا.

استخدامها الحيوي في موقع عربي متجاوب: overflow-x: auto على حاويات الجداول وكتل الكود — يجعل العريض يمرر داخل صندوقه بدل كسر عرض الصفحة كلها على الجوال (كل جداول هذا الموقع ملفوفة هكذا). ولها أثر جانبي مفيد ومزعج معًا: أي قيمة غير visible تنشئ سياق تنسيق جديد وتقص أبناء absolute الخارجين — سبب اختفاء قوائم منسدلة كثيرة.

الصياغة

.table-wrapper {
  overflow-x: auto; /* visible | hidden | scroll | auto */
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .clip { width: 230px; height: 70px; background: #ede9fe; border-radius: 10px; padding: 10px; overflow: auto; }
</style>
<div class="clip">
  هذا نص أطول من صندوقه عمدًا — بفضل overflow: auto ظهر شريط تمرير داخلي بدل أن يفيض النص خارج الحدود ويخرب التخطيط المجاور.
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
auto	شريط تمرير عند الحاجة فقط — الخيار العملي الافتراضي
hidden	قص صامت — للزخارف ولقطع سياقات التنسيق
overflow-x / overflow-y	تحكم منفصل بالمحورين — x:auto للجداول العريضة
clip	قص أصرم من hidden بلا إمكانية تمرير برمجي

💡 نصائح عملية

كل جدول وكتلة كود بموقع عربي: حاوية overflow-x:auto — تأمين الجوال الإلزامي
قائمة منسدلة مقصوصة؟ فتش عن overflow غير visible على أحد الأجداد

⚠️ أخطاء شائعة

hidden لإخفاء مشكلة تخطيط بدل حلها — كنس تحت السجادة
نسيان أن sticky يتعطل داخل أجداد بـ overflow مخفي

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs