⁣Зачем нужен overflow: clip, если есть overflow: hidden? 🎯

Когда верстаешь карточку со скруглёнными углами, а дочерний элемент «вылезает» за границы — тень, glow, бегущая строка, фокус-кольцо — первое желание: зарезать лишнее через overflow: hidden.

Но у hidden есть неочевидный побочный эффект: он делает элемент скролл-контейнером.

Это значит:
— содержимое можно программно проскроллить (scrollTop, scrollIntoView);
— браузер резервирует ресурсы на скролл-механику;
— при навигации с клавиатуры скрытый контент может стать «достижимым» скроллом — UX ломается.

Когда тебе нужно лишь обрезать **декоративный** выплеск, а не сделать полноценный скролл-регион — hidden избыточен и вреден.

Решение — overflow: clip.

Он делает ровно одну вещь: жёстко обрезает всё, что выходит за границы бокса, и **не создаёт скролл-контейнер**. Никакого программного скролла, никаких сюрпризов с фокусом.

.card {
  overflow: clip;
}

А теперь самое интересное — overflow-clip-margin.

По умолчанию обрезка идёт по padding-краю. Но что, если хочется скруглить контент внутри, а снаружи оставить видимой аккуратную тень? Раньше приходилось делать костыли с врапперами. Теперь можно расширить область видимости:

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

Эти 8px — пространство за пределами бокса, в котором контент продолжает отображаться, а всё, что дальше — обрезается. По сути, визуальная «зона безопасности» для декоративных элементов.

Где реально спасает:
— тени и drop-shadow, которые чуть-чуть выходят за карточку;
— focus ring у кнопок внутри контейнера с обрезкой;
— всплывающие подсказки внутри карточки;
— трансформированные бейджи, наклонённые заголовки, кастомные ленты.

Ещё один нюанс, который часто упускают: при паре overflow-x: visible; overflow-y: hidden браузер молча превращает visible в auto — получаем скролл-контейнер там, где не ждали. С clip такого нет: visible остаётся visible, потому что clip не создаёт scroll container. Это позволяет безопасно комбинировать:

.card {
  overflow-x: clip;
  overflow-y: visible;
}

Поддержка: все современные браузеры — Chrome 90+, Firefox 81+, Safari 16+. Можно смело использовать, а с фолбэком на hidden для старых — тем более.

Итого: если hidden «на всякий случай» режет всё и создаёт скрытый скролл — clip решает точечно и без побочных эффектов. А overflow-clip-margin даёт тонкую настройку: сколько именно декоративного выплеска оставить на виду.

Источники:
— MDN: overflow — https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
— MDN: overflow-clip-margin — https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin
— CSS Overflow Module Level 3 — https://drafts.csswg.org/css-overflow-3/