Thuộc tính overflow và scroll container hoạt động như thế nào?

Question

Accepted Answer

`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.

```css
.box { overflow: visible; }  /* mặc định — nội dung TRÀN RA ngoài box */
.box { overflow: hidden; }   /* bị cắt — nội dung tràn bị cắt bỏ */
.box { overflow: scroll; }   /* luôn hiện thanh cuộn (kể cả khi không cần) */
.box { overflow: auto; }     /* thanh cuộn chỉ xuất hiện KHI cần (tốt nhất) */
```

## Tách trục riêng

```css
.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.

## Tạo một scroll container

```css
.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.

## Một tác dụng phụ tinh tế nhưng quan trọng: overflow tạo ra block formatting context

```css
.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."

## Các tính năng cuộn hiện đại

```css
.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).

## Tại sao điều này quan trọng

`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.