Что делает свойство overflow в CSS и в каких случаях его следует использовать?

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

• visible: Содержимое отображается полностью, выходя за пределы контейнера.
• hidden: Содержимое, выходящее за пределы контейнера, обрезается и не видно.
• scroll: Всегда отображаются полосы прокрутки (горизонтальная и вертикальная), даже если содержимое не выходит за пределы контейнера.
• auto: Полосы прокрутки отображаются только при необходимости (когда содержимое выходит за пределы контейнера).

Использовать следует:

• Когда содержимое элемента (например, текст или изображение) может быть больше, чем заданные для него размеры, и требуется управлять его отображением.
• Для создания прокручиваемых областей внутри страницы, например, для списков, блоков кода или таблиц.
• Для обрезки нежелательного содержимого, выходящего за пределы элемента, чтобы сохранить исходный макет.

Пример использования overflow: auto; для блока с ограниченной высотой:

.scrollable-block {
  height: 200px; /* Ограничиваем высоту блока */
  overflow: auto; /* Добавляем полосы прокрутки, если содержимое больше */
  border: 1px solid #ccc; /* Добавляем рамку для наглядности */
  padding: 10px; /* Внутренние отступы */
}