overflow điều khiển điều gì xảy ra khi nội dung quá lớn so với box của nó — bị cắt, có thể cuộn, hay tràn ra ngoài.
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
.box {
overflow-x: hidden; /* cắt theo chiều ngang */
overflow-y: auto; /* cuộn dọc khi cần */
}
Một mẫu thường gặp: ngăn tràn ngang trong khi cho phép cuộn dọc.
.scroll-area {
max-height: 400px; /* giới hạn chiều cao */
overflow-y: auto; /* nội dung vượt 400px sẽ cuộn */
}
Điểm then chốt: một scroll container cần một kích thước bị giới hạn (height/max-height) cộng với overflow: auto. Nếu không có giới hạn kích thước, box chỉ nở ra và không bao giờ cuộn.
.clearfix { overflow: hidden; } /* chứa float / ngăn margin collapse */
Đặt overflow thành bất cứ giá trị nào khác visible sẽ thiết lập một block formatting context mới, nó chứa các phần tử con float và ngăn margin collapse — trong lịch sử được dùng làm "clearfix."
.gallery {
overflow-x: auto;
scroll-snap-type: x mandatory; /* dính vào các item khi cuộn */
overscroll-behavior: contain; /* ngăn cuộn "lan" sang trang */
}
.gallery > * { scroll-snap-align: start; }
scroll-snap xây dựng carousel mà không cần JS; overscroll-behavior ngăn một panel đã cuộn cũng cuộn cả trang phía sau (tuyệt cho modal/cửa sổ chat).
overflow chi phối các vùng cuộn, cắt text (với text-overflow: ellipsis), và hành vi cuộn của modal/panel.
Biết rằng scroll container cần một giới hạn kích thước, rằng overflow tạo ra một formatting context, và các trợ thủ hiện đại (scroll-snap, overscroll-behavior) bao quát các nhu cầu thực tế về layout và UX xoay quanh overflow.