Как работает свойство overflow в CSS?

Свойство overflow в CSS указывает браузеру, как поступать с содержимым (текст, картинки, другие блоки), которое выходит за границы блока (за его ширину или высоту). code.mu

В зависимости от значения свойства, браузер может скрыть вылезающую часть, добавить полосы прокрутки или ничего не делать (оставить как есть — вылезшим за границы). code.mu

Некоторые значения свойства overflow и их описание:

• visible. ru.w3docs.com code.mu Отображается весь контент, даже если он выходит за границы блока. ru.w3docs.com Значение по умолчанию. ru.w3docs.com
• hidden. ru.w3docs.com code.mu Контент обрезается, чтобы поместиться в блоке. ru.w3docs.com
• scroll. ru.w3docs.com code.mu Добавляется полоса прокрутки, чтобы увидеть вышедший за границы контент. ru.w3docs.com Полосы прокрутки будут всегда, даже если ничего не выходит (в этом случае они будут неактивными). code.mu
• auto. ru.w3docs.com code.mu Добавляет полосы прокрутки при необходимости: если содержимое не помещается — они появятся, если всё помещается — их не будет. code.mu
• overlay. ru.w3docs.com Работает также, как и значение auto, но полоса прокрутки находится сверху от контента. ru.w3docs.com Значение «overlay» является устаревшим. ru.w3docs.com