Как работают свойство overflow и контейнеры прокрутки?

Question

Accepted Answer

`overflow` управляет тем, что происходит, когда содержимое **слишком велико** для его окна — будет ли оно обрезано, прокручиваться или выходить за пределы.

```css
.box { overflow: visible; }  /* default — content spills OUT of the box */
.box { overflow: hidden; }   /* clipped — overflowing content is cut off */
.box { overflow: scroll; }   /* always shows scrollbars (even if not needed) */
.box { overflow: auto; }     /* scrollbars appear ONLY when needed (best) */
```

## Отдельные оси

```css
.box {
  overflow-x: hidden;  /* clip horizontal */
  overflow-y: auto;    /* scroll vertical when needed */
}
```

Общий паттерн: предотвратить горизонтальное переполнение при допущении вертикальной прокрутки.

## Создание контейнера прокрутки

```css
.scroll-area {
  max-height: 400px;   /* constrain the height */
  overflow-y: auto;    /* content beyond 400px scrolls */
}
```

Ключ: контейнер прокрутки требует **ограниченный размер** (`height`/`max-height`) *плюс* `overflow: auto`. Без ограничения размера окно просто растет и никогда не прокручивается.

## Тонкий, но важный побочный эффект: overflow создает контекст форматирования блока

```css
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
```

Установка `overflow` на что-либо, кроме `visible`, устанавливает новый **контекст форматирования блока**, который содержит плавающие дочерние элементы и предотвращает схлопывание отступов — исторически использовалось как "clearfix".

## Современные функции прокрутки

```css
.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`) охватывают практические потребности макета и UX вокруг переполнения.