В CSS у
overflow-x: hidden и overflow-y: hidden есть одна важная особенность: если вы таким образом прячете переполнение по одной оси, автоматически переполнение прячется и по другой (там значение становится auto). То есть нет удобной возможности спрятать только то, что вылазит по вертикали, например.Ахмад Шадид рассказывает про то, как работают значения
overflow-*: clip. Это как раз то поведение, которое нам нужно, чтобы что-то спрятать по одной оси, но по другой оси всё красиво показывалось. В статье есть демки, которые помогают лучше разобраться с особенностями работы свойства.Я с таким много раз сталкивался, когда нужно было всякие декоративные элементы прикрепить к блоку на всю ширину вьюпорта. Если ничего не прятать — появляется горизонтальный скролл. Если спрятать по горизонтали — декоративные элементы обрезались по вертикали (прятались под скролл). Приходилось выкручиваться псевдоэлементами, абсолютным позиционированием и трансформациями. А теперь можно делать всё это сильно проще.
https://ishadeed.com/article/overflow-clip/
