overflow নিয়ন্ত্রণ করে যখন কন্টেন্ট তার বাক্সের জন্য খুব বড় হয় তখন কী ঘটে — তা ক্লিপ করা হয়, স্ক্রল হয় বা বাইরে বেরিয়ে আসে।
css
{ : 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 */
}
মূল বিষয়: একটি স্ক্রল কন্টেইনারের সীমাবদ্ধ আকার (height/max-height) প্লাস overflow: auto প্রয়োজন। আকারের সীমা ছাড়া, বাক্সটি সাধারণত বৃদ্ধি পায় এবং কখনও স্ক্রল করে না।
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
overflow কে visible ছাড়া অন্য কিছুতে সেট করা একটি নতুন ব্লক ফরম্যাটিং কন্টেক্সট প্রতিষ্ঠা করে, যা ফ্লোটিং চিল্ড্রেন ধারণ করে এবং মার্জিন কোলাপসিং প্রতিরোধ করে — ঐতিহাসিকভাবে "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 ছাড়াই ক্যারোসেল তৈরি করে; overscroll-behavior একটি স্ক্রল করা প্যানেলকে তার পিছনের পৃষ্ঠা থেকেও স্ক্রল হতে বাধা দেয় (মডাল/চ্যাট উইন্ডোর জন্য দুর্দান্ত)।
overflow স্ক্রল এলাকা, টেক্সট ক্লিপিং (text-overflow: ellipsis সহ) এবং মডাল/প্যানেল স্ক্রল আচরণ পরিচালনা করে।
জানা যে স্ক্রল কন্টেইনারের আকারের সীমা প্রয়োজন, overflow একটি ফরম্যাটিং কন্টেক্সট তৈরি করে, এবং আধুনিক সাহায্যক (scroll-snap, overscroll-behavior) overflow সম্পর্কে ব্যবহারিক লেআউট এবং UX চাহিদা কভার করে।