CSS свойство `overflow`

Определение и применение

CSS свойство overflow указывает, что произойдёт, если содержимое переполняет размеры элемента.

Первое значение задаёт overflow-x, второе — overflow-y. Если одно из них отлично от visible и clip, то visible по другой оси вычисляется как auto, а clip — как hidden. clip запрещает и программную прокрутку и само по себе не создаёт новый контекст форматирования.

Попробуйте значения overflow

Содержимое шире и выше блока. Сравните обрезку и доступность прокрутки. При настройке одной оси другая может вычисляться как auto; полосы прокрутки зависят от системы.

Значение свойстваoverflow: visible;overflow: hidden;overflow: scroll;overflow: auto;

overflow: visible

HTML и CSS примера

HTML

<div class="stage">
  <div
    class="demo-target"
    tabindex="0"
    role="region"
    aria-label="Прокручиваемая область"
  >
    <div class="long">
      Широкое содержимое →
      <p>Строка 2</p>
      <p>Строка 3</p>
      <p>Строка 4</p>
      <p>Конец</p>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  width: 100%;
  height: 130px;
  overflow: visible;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}
.long {
  width: 380px;
  min-height: 240px;
  background: linear-gradient(#ffe4bd, #b9d7eb);
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  width: 100%;
  height: 130px;
  overflow: hidden;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}
.long {
  width: 380px;
  min-height: 240px;
  background: linear-gradient(#ffe4bd, #b9d7eb);
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  width: 100%;
  height: 130px;
  overflow: scroll;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}
.long {
  width: 380px;
  min-height: 240px;
  background: linear-gradient(#ffe4bd, #b9d7eb);
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  width: 100%;
  height: 130px;
  overflow: auto;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}
.long {
  width: 380px;
  min-height: 240px;
  background: linear-gradient(#ffe4bd, #b9d7eb);
}

Поддержка браузерами

Спецификации: CSS overflow, svgwg

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.overflow
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`overflow`	✓1	✓12	✓1 Версия 1 выпущена в 2004 г. Примечание MDN (англ.) After Firefox 3.6, the `overflow` property is correctly applied to table group elements (`<thead>`, `<tbody>`, `<tfoot>`).	✓7	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`auto`	✓1 Версия 1 выпущена в 2008 г. Версия 114 выпущена в 2023 г. — Имя overlay	✓12	✓1 Версия 1 выпущена в 2004 г. Версия 112 выпущена в 2023 г. — Имя overlay	✓15 Версия 15 выпущена в 2013 г. Версия 100 выпущена в 2023 г. — Имя overlay	✓3 Версия 3 выпущена в 2007 г. Версия 12 выпущена в 2018 г. — Имя overlay	✓18 Версия 18 выпущена в 2012 г. Версия 114 выпущена в 2023 г. — Имя overlay	✓4 Версия 4 выпущена в 2011 г. Версия 112 выпущена в 2023 г. — Имя overlay	✓14 Версия 14 выпущена в 2013 г. Версия 76 выпущена в 2023 г. — Имя overlay	✓2 Версия 2 выпущена в 2008 г. Версия 12 выпущена в 2018 г. — Имя overlay	✓1.0 Версия 1.0 выпущена в 2013 г. Версия 23.0 выпущена в 2023 г. — Имя overlay	✓4.4 Версия 4.4 выпущена в 2013 г. Версия 114 выпущена в 2023 г. — Имя overlay	✓2 Версия 2 выпущена в 2008 г. Версия 12 выпущена в 2018 г. — Имя overlay
`clip`	✓90	✓90	✓81 Версия 81 выпущена в 2020 г. Версия 1.5 выпущена в 2005 г. — Удалено в 81; Имя -moz-hidden-unscrollable	✓76	✓16	✓90	✓81 Версия 81 выпущена в 2020 г. Версия 4 выпущена в 2011 г. — Удалено в 81; Имя -moz-hidden-unscrollable	✓64	✓16	✓15.0	✓90	✓16
`hidden`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
Multiple keyword syntax for overflow-x and overflow-y	✓68	✓79	✓61	✓55	✓13.1	✓68	✓61	✓48	✓13.4	✓10.0	✓68	✓13.4
overflow applies to replaced elements.	✓108	✓12	✓148	✓94	×	✓108	✓148	✓73	×	✓21.0	✓108	×
`scroll`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`visible`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
Ещё 6 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

overflow: [ visible | hidden | clip | scroll | auto ]{1,2};

/* Глобальные значения */
overflow: initial | inherit | unset | revert | revert-layer;

| — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон; {1,2} — число повторений от 1 до 2.

JavaScript синтаксис:

JavaScript

element.style.overflow = "hidden";

Начальное значение свойства

visible.

Значения свойства

Значения overflow
Значение	Описание
`visible`	Переполнение не обрезается, содержимое выходит за пределы размеров элемента. Начальное значение.
`hidden`	Переполнение обрезается (контент, который выходит за размеры будет невидимым).
`scroll`	Переполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров.
`auto`	Если переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров.
`clip`	Обрезает выходящее содержимое и не создаёт область прокрутки; программная прокрутка также недоступна.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `overflow` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Overflow — спецификация overflow.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Прокрутка и обрезка

Прокрутите второй блок. Замените auto на scroll или hidden и сравните доступность скрытого содержимого.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.large {
    width: 260px;
    min-height: 180px;
    background: #d6e5f0;
    padding: 12px;
}

index.html