---
title: Overflow
localeTitle: Переполнение
---
# Переполнение

Свойство `overflow` определяет, что произойдет, если содержимое переполнит поле элемента (это свойство работает только для элементов блока с указанной высотой).

Это свойство указывает, следует ли обрезать содержимое или добавить полосы прокрутки, если содержимое элемента слишком велико, чтобы поместиться в указанной области.

Например, заданный элемент уровня блока (`<div>`) имеет ширину 300px и содержит изображение шириной 400px. Изображение будет торчать из `<div>` и будет видимым по умолчанию. Однако, если значение `overflow` установлено в `hidden`, изображение будет обрезано в 300px.

## Значения

* `visible`: Это значение свойства по умолчанию. Содержимое не обрезается, если оно больше блока.
* `hidden`: Переполненный контент будет скрыт.
* `scroll`: Похоже на `hidden`, но пользователи смогут прокручивать скрытое содержимое.
* `auto`: Если содержимое выходит за рамки своего блока, то это содержимое будет скрыто, в то время как полоса прокрутки должна быть видна для пользователей, чтобы прочитать остальную часть содержимого.
* `initial`: Использует значение `visible` по умолчанию.
* `inherit`: Задает для `overflow` значение родительского элемента.

## Примеры

### Visible:
```css
.box-element { overflow: visible; }
```
![Пример свойства `visible`](https://habrastorage.org/webt/h0/ck/2n/h0ck2nev-nedlfbwsetq9al0ufo.png "Пример свойства `visible`")

### Hidden:
```css
.box-element { overflow: hidden; }
```
![Пример свойства `hidden`](https://habrastorage.org/webt/mv/rf/bx/mvrfbxzsyv_vud5psjpjytkcbyy.png "Пример свойства `hidden`")

### Scroll:
```css
.box-element { overflow: scroll; }
```
![Пример свойства `scroll`](https://habrastorage.org/webt/87/ta/4b/87ta4b_xusokvzxfix_cv1x6uqo.png "Пример свойства `scroll`")

### Auto:
```css
.box-element { overflow: auto; }
```
![Пример свойства `auto`](https://habrastorage.org/webt/pm/vn/as/pmvnasexw8adhg2ietpvukv1alw.png "Пример свойства `auto`")

## overflow-x и overflow-y

* `overflow-x`: Позволяет пользователю прокручивать содержимое, выходящее за пределы высоты элемента.
* `overflow-y`: Позволяет пользователю прокручивать содержимое, выходящее за пределы элемента.

```css
  .box-element {
    overflow-x: scroll;
    overflow-y: auto;
  }
```
И `.box-element` будет выглядеть так:
![Пример свойства `overflow-x` и `overflow-y`](https://habrastorage.org/webt/7e/d6/c-/7ed6c-khxxxpl3119in2keqtb7w.png "Пример свойства `overflow-x` и `overflow-y`")

Если содержимое переполняется по оси - Y, то это содержимое будет скрыто, в то время как полоса прокрутки должна быть видна для пользователей, чтобы прочитать остальную часть содержимого.

#### Подробная информация

* [CSS-Tricks](https://css-tricks.com/almanac/properties/o/overflow/)