خاصية Overflow
آخر تحديث: 2026-09-13
overflow خاصية Overflow
تتحكم خاصية overflow فيما يحدث عندما يتجاوز المحتوى حدود حاويته وهي الأداة الأساسية للتعامل مع المحتوى المتجاوز. القيمة الافتراضية visible تسمح بظهور المحتوى المتجاوز؛ و hidden تَقصه؛ و scroll تعرض أشرطة التمرير دائمًا؛ و auto تعرض أشرطة التمرير فقط عند الحاجة، وهو القيمة الأكثر استخدامًا.
| الفئة | |
|---|---|
| القيمة الأولية | visible |
| موروث | لا |
| ينطبق على | block-container |
| نوع الحركة | discrete |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
overflow: visible | hidden | clip | scroll | auto;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
visible | hidden | scroll | auto | كلمة مفتاحية | كيفية معالجة المحتوى المتجاوز. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يُنشئ overflow:hidden أو auto سياق تنسيق كتلة جديد (BFC)، والذي يمكن استخدامه أيضًا لمسح الـ floats.
❓ الأسئلة الشائعة
Qما الفرق بين overflow:auto و overflow:scroll؟
Aيعرض scroll أشرطة التمرير دائمًا، حتى عندما لا يتجاوز المحتوى، ويحجز مساحة لشريط التمرير في كلا الاتجاهين. يعرض auto أشرطة التمرير فقط عندما يتجاوز المحتوى فعليًا ويخفيها تمامًا خلاف ذلك، مما يبدو أنظف. لمعظم حالات الاستخدام، يُوصى بـ auto. لاحظ أن كليهما يحصر المحتوى داخل الصندوق، لذا لا يمكن للعناصر داخل المنطقة القابلة للتمرير أن تمرر أبعد من الأصل، ولا يمنع أي منهما الصفحة نفسها من التمرير.
Qكيف أجعل المحتوى قابلًا للتمرير عند تجاوزه؟
Aأعطِ الحاوية أولًا ارتفاعًا محددًا باستخدام height أو max-height، ثم اضبط overflow:auto أو scroll. بمجرد أن يتجاوز المحتوى حجم الحاوية يمكن تمريره لرؤيته، مثلًا .list { height:300px; overflow:auto; }. للتمرير في الصفحة بأكملها، لا تُقيّد overflow على html أو body، وإلا ستفقد الصفحة سلوك التمرير الافتراضي لديها. وتأكد أيضًا من أن عرض الحاوية مقيد، لأن التجاوز الأفقي أثر جانبي شائع.
Qلماذا يمسح overflow:hidden الـ floats؟
Aعندما يُعيّن overflow إلى hidden أو auto أو scroll أو clip، ينشئ العنصر سياق تنسيق كتلة (BFC). يأخذ BFC في الاعتبار ارتفاع عناصره الابن الطافية، مما يصلح مشكلة الأصل المنهار. لهذا السبب يُعد إضافة overflow:hidden لأصل عنصر float تقنية كلاسيكية للتنظيف؛ مع الانتباه فقط إلى أنه يَقص أيضًا المحتوى المتجاوز، مما قد يقطع القوائم المنسدلة أو التلميحات التي تمتد خارج الصندوق.
Qما الفرق بين overflow:hidden و overflow:visible؟
Aيُصيّر visible، وهو الافتراضي، المحتوى المتجاوز خارج الصندوق؛ لا يؤثر على التخطيط لكن قد يغطي العناصر المجاورة. و يَقص hidden التجاوز فيصبح المحتوى غير مرئي ولا يمكن تمريره لرؤيته. يُستخدم hidden عادةً لإنشاء BFC، ولقص المحتوى داخل الزوايا المستديرة عبر border-radius، ولإخفاء التجاوز الزخرفي، بينما يُفضل ترك visible للحالات التي يجب أن يخرج فيها التجاوز فعليًا من الحاوية.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
