Что такое переполнение (overflow) в CSS

«Что такое переполнение (overflow) в CSS» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Переполнение контентом возникает, когда содержимое элемента превышает его заданные размеры. Основные причины:

  1. Фиксированные размеры (width/height) без overflow
  2. Длинные слова без переносов (word-break: break-word)
  3. Неучтённые отступы/границы в box-sizing
  4. Абсолютно позиционированные элементы

Пример:

.container {
  width: 200px;
  height: 100px;
  /* Без этого контент выйдет за границы */
  overflow: auto;
}

Как исправить:

  • Использовать overflow: hidden/auto/scroll
  • Добавить word-break: break-word для текста
  • Применять box-sizing: border-box
  • Использовать flex/grid для адаптивных контейнеров