overflow: hidden ≠ обрезка контента

Многие ставят overflow: hidden, когда нужно просто обрезать то, что вылезает за границы блока. Но есть нюанс: это свойство делает элемент контейнером прокрутки — даже если полос прокрутки нет.

Побочки такие:
— ломается поведение position: sticky
— путается программная прокрутка
— сбивается поиск ближайшего скролл-контейнера

Если прокрутка вообще не нужна, бери более точное значение:

.wrapper { overflow: clip; }

Контент так же обрезается, но контейнер прокрутки не создаётся. Поэтому sticky внутри будет ориентироваться на внешний скролл, а не застревать на обёртке.

Бонус — можно отодвинуть линию обрезки:

.wrapper { overflow-clip-margin: 8px; }

Удобно, когда нужно оставить пару пикселей под тень или другой визуальный эффект.

Важно: clip не заменяет hidden полностью — если блок реально должен прокручиваться, clip не подойдёт.

#CSS #frontend #overflow