overflow

CSS-властивість overflow визначає, що відбувається з вмістом елемента, який не поміщається в його розміри (ширину або висоту). Вона дозволяє контролювати прокручування, обрізання або видимість зайвого вмісту.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ компаній України, Європи та США. 558 відеовідгуків від працевлаштованих випускників. Це топ серед українських ІТ-шкіл. Обирай свою нинішню сферу роботи й дивись історії екс-колег, що вже перейшли в ІТ

Синтаксис

overflow: visible | hidden | scroll | auto | clip;

Значення

  • visible — зайвий вміст видно за межами елемента. Це значення за замовчуванням для блокових елементів.
  • hidden — зайвий вміст обрізається, і прокрутка не з’являється.
  • scroll — завжди додаються смуги прокрутки (горизонтальна та вертикальна), навіть якщо вони не потрібні.
  • auto — смуги прокрутки з’являються тільки тоді, коли вміст перевищує розмір елемента.
  • clip — вміст обрізається без створення смуг прокрутки; схоже на hidden, але сучасніше.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • overflow працює разом із властивостями width та height, щоб контролювати видимість контенту, що перевищує розміри елемента.
  • Для Flexbox та Grid overflow корисний, щоб уникнути виходу дочірніх елементів за межі контейнера.
  • Значення auto і scroll створюють смуги прокрутки, які можна стилізувати через scrollbar у сучасних браузерах.
  • clip особливо корисне для сучасних макетів, коли потрібно просто обрізати контент без прокрутки.
  • Властивість підтримується всіма сучасними браузерами.