Как задать 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]

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

[RudFox]

Сергей delphinpro, Вы и правда ничего не поняли что хотел человек. Вот чего многие пытаются добиться https://skr.sh/sQQCgjlvOwG что допустим если у контейнера стоит overflow: hidden; а внутри этого контейнера эдемент снизу по вертикали должен выходить за его границы. На скриншоте дорисовал что красный круг должен выходить снизу за overflow: hidden; а по горизонтали за синюю линию не должен.

Тут не больше фантазии нужно, а сперва разобраться чего хочет человек.
И чтоб вы знали для себя, такой возможности нет.

[RudFox]

Сергей delphinpro, чтоб вы смогли разобраться сделал следующую картинку

синий блок слайдер у которого задан overflow: hidden;, у элементов например может быть расширение при наведении. И когда мы будем наводить на нижние элементы, которые должны расширяться по вертикали, они не смогут выйти за границы синего блока. Желтый элемент при :hover не покажется полностью, то как на картинке я сделал пример что желтый элемент выходит за границы синего (это нельзя сделать). Вам не поможет никакой position:absolute и z-index

Элемент никак не сможет показаться за пределами overflow: hidden;
Чтоб это сделать, нужно убрать overflow: hidden;, а этого делать нельзя.
Например в моем примере со слайдером overflow: hidden; необходим, чтоб скрывать элементы по горизонтали (чтоб слайдер мог перелистываться к следующим элементам).

Человек примерно такое и хотел - как сделать чтоб блок по горизонтали скрывался, а по вертикали нет.
Overflow-X: hidden и Overflow-Y: visible тоже не помогут. Человек правильно написал, что при Overflow-Y: visible появляется только полоса прокрутки по вертикали.

Вот что в результате Вы получите:

Желтый элемент дойдет до конца синего блока и всё что будет дальше не увидите, будет скрыто из-за overflow: hidden;

[Сергей delphinpro]

RudFox, Я прекрасно понял, чего хотел человек. И предложил решение. Оно не универсальное, подойдет в конкретном случае.

Ну а за то что "просветили" меня насчет невозможности обрезки по одной из сторон, спасибо. А то я за 15 лет работы сам-то об этом не знал..

[Сергей delphinpro]

RudFox,

Элемент никак не сможет показаться за пределами overflow: hidden;

Ну и чтобы вы так категорично больше не делали заявления, вот вам интересный пример

[RudFox]

Сергей delphinpro, вы опять не внимательны. Ну хорошо, вот вам задача.
При наведении на Ваш class="item"
1) он должен увеличиваться по высоте height: 120px;
2) он должен изменять фон на желтый background: yellow;
3) он должен расширяться по горизонтали захватывая в себя блок Ooops!!! на красном фоне, при этом размер ширины родителя не должен измениться. Только блок item должен расшириться поверх других блоков.
4) красный блок Ooops!!! должен оказаться внутри желтого фона, черная обводка также должна охватывать его.
5) убирать overflow: hidden; нельзя
Результат должен быть такой:

[RudFox]

Или любой другой пример, взять в Ваш class="dropdown" положить текст, который также по умолчанию скрыт.

Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях.

При наведении на class="item" :
1) .item должен расширяться: width: 350px; height: 100px; и показываться поверх
2) фон желтый background: yellow; плюс Ваша обводка border: 3px solid black;
2) текст в dropdown должен появляться
3) убирать overflow: hidden; нельзя
4) результат: