overflow
========

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Резюме
------

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

Использование свойства `overflow` со значениями, отличными от `visible`, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования (en-US). Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута `scrollTop` для соответствующего HTML-элемента, даже если `overflow` имеет значение `hidden`, элемент, возможно, придётся прокрутить.

|  |  |
| --- | --- |
| Начальное значение | `visible` |
| Применяется к | Block-containers, flex containers, and grid containers |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `overflow-x` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
* `overflow-y` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
 |
| Animation type | discrete |

Синтаксис
---------

Формат синтаксиса (en-US): 
```

overflow =   
  <'overflow-block'>{1,2} (en-US)    
  
```



```css
overflow: visible
overflow: hidden
overflow: scroll
overflow: auto

overflow: inherit
```

### Значения

`visible`

По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.

`hidden`

Контент обрезается, без предоставления прокрутки.

`scroll`

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

`auto`

Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.

#### Расширения Mozilla

`-moz-scrollbars-none`

Используйте `overflow:hidden`.

`-moz-scrollbars-horizontal` 
Устарело

Использование `overflow-x` (en-US) и `overflow-y` (en-US) предпочтительнее.

`-moz-scrollbars-vertical` 
Устарело

Использование `overflow-x` (en-US) и `overflow-y` (en-US) предпочтительнее.

-moz-hidden-unscrollable 
Non-standard

Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и `<html>`, `<body>` клавишами со стрелками и колесом мыши.

Примеры
-------


```css
p {
  width: 12em;
  height: 6em;
  border: dotted;
  overflow: visible; /\* содержимое не обрезается \*/
}
```


`visible` (default)
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.


```css
p {
  overflow: hidden; /\* полосы прокрутки не предоставляются \*/
}
```


`overflow: hidden`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.


```css
p {
  overflow: scroll; /\* всегда показывать полосы прокрутки \*/
}
```


`overflow: scroll`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.


```css
p {
  overflow: auto; /\* добавить полосы прокрутки, если это необходимо \*/
}
```


`overflow: auto`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Спецификации
------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Firefox (Gecko) Примечания

Из-за Firefox 3.6 (Gecko 1.9.2), `свойство overflow неверно применяется к элементам` table-group (`<thead>` , `<tbody>` , `<tfoot>`). Это поведение будет исправлено в следующих версиях.

### Internet Explorer Примечания

Internet Explorer 4 - 6 увеличивает элемент с `overflow:visible` (значение по умолчанию), чтобы заполнить содержимое в нём. `height/width` действуют подобно `min-height/min-width`.

Смотрите также
--------------

* Связанные свойства CSS: `text-overflow` (en-US), `white-space`, `overflow-x` (en-US), `overflow-y` (en-US), `overflow-inline` (en-US), `overflow-block`, `clip` (en-US), `display`