Как задать overflow: hidden только по горизонтали?

Question

[Тёма Ти]

Нужно, чтобы содержимое блока по вертикали выходило за границы, а по горизонтали - обрезалось. Overflow-x: hidden не помогает, а просто добавляет блоку полосу прокрутки. Буду благодарен за совет.

Comments

[Шохрух Шаймардонов]

А можно глянуть что у вас там не обрезается? Шар дома, не получается гадать

[Тёма Ти]

Шохрух Шаймардонов, там обычная png-картинка, находится в верхнем правом углу блока. По вертикали она накладывается на верхний блок, так и нужно. Но по горизонтали она тоже выходит за границы блока, здесь хотелось бы чтобы она не выходила за границы.

[Шохрух Шаймардонов]

Тёма Ти, задайте родителю и самой этой карточке свойства position и родителю сделайте z-index больше чем у дочерней картинки

[Тёма Ти]

Шохрух Шаймардонов, вот такая ситуация.

[Шохрух Шаймардонов]

Тёма Ти, тут либо с js делать. либо костыли на css. Ибо спецификация W3C гласит, что overflow-y/x: auto/visible и overflow-x/y: hidden преобразуются в overflow-x: hidden; overflow-y: hidden (читайте тут)

Answer 1

[Одиночка Айс]

Ниче не понял...

https://codepen.io/daemonhk/pen/zYxezML

Answer 2

[Сергей delphinpro]

Больше фантазии, и всё получится.

Comments

[Тёма Ти]

Вы не обрезали красный круг, а просто поставили поверх него padding определённой толщины жёлтого цвета. Так и я могу. Мне нужно этот круг не скрыть, а чтобы он не выходил за границы зеленого блока по горизонтали в принципе.

[Сергей delphinpro]

Тёма Ти, он не выходит за границы зеленого блока по горизонтали.

[Тёма Ти]

Сергей delphinpro, значит я не до конца разобрался. Продолжим, спасибо :)

[Ярослав Иванов]

Похоже на современное искусство))

[Сергей delphinpro]

Ярослав Иванов, Мне тоже понравилось. Думаю распечатать и в раму на стену.