overflow کنٹرول کرتا ہے کہ جب مواد اپنے باکس کے لیے بہت بڑا ہو تو کیا ہوتا ہے — چاہے یہ کاٹا جائے، سکرول ہو، یا باہر نکل جائے۔
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
.box {
overflow-x: hidden; /* clip horizontal */
overflow-y: auto; /* scroll vertical when needed */
}
ایک عام نمونہ: افقی overflow سے بچتے ہوئے عمودی سکرول کی اجازت دیں۔
.scroll-area {
max-height: 400px; /* constrain the height */
overflow-y: auto; /* content beyond 400px scrolls */
}
کلیدی بات: ایک scroll container کو محدود سائز (height/max-height) اور overflow: auto کی ضرورت ہے۔ سائز کی حد کے بغیر، یہ باکس صرف بڑھتا ہے اور کبھی سکرول نہیں ہوتا۔
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
overflow کو visible کے علاوہ کچھ بھی سیٹ کرنے سے ایک نیا block formatting context قائم ہوتا ہے، جو floating children کو شامل کرتا ہے اور margin collapsing سے روکتا ہے — تاریخی طور پر "clearfix" کے طور پر استعمال ہوتا ہے۔
.gallery {
overflow-x: auto;
scroll-snap-type: x mandatory; /* snap to items while scrolling */
overscroll-behavior: contain; /* stop scroll "chaining" to the page */
}
.gallery > * { scroll-snap-align: start; }
scroll-snap کوئی JS کے بغیر carousels بناتا ہے؛ overscroll-behavior ایک scrolled panel کو صفحہ کے پیچھے بھی سکرول کرنے سے روکتا ہے (modals/chat windows کے لیے بہترین)۔
overflow scroll areas، text clipping (with text-overflow: ellipsis)، اور modal/panel scroll behavior کو کنٹرول کرتا ہے۔
یہ جاننا کہ scroll containers کو سائز کی حد کی ضرورت ہے، کہ overflow ایک formatting context بناتا ہے، اور جدید helpers (scroll-snap، overscroll-behavior) overflow کے گرد عملی layout اور UX ضروریات کو پورا کرتے ہیں۔