Как задать overflow: hidden только по горизонтали?
Нужно, чтобы содержимое блока по вертикали выходило за границы, а по горизонтали - обрезалось. Overflow-x: hidden не помогает, а просто добавляет блоку полосу прокрутки. Буду благодарен за совет.
Шохрух Шаймардонов, там обычная png-картинка, находится в верхнем правом углу блока. По вертикали она накладывается на верхний блок, так и нужно. Но по горизонтали она тоже выходит за границы блока, здесь хотелось бы чтобы она не выходила за границы.
Тёма Ти, тут либо с js делать. либо костыли на css. Ибо спецификация W3C гласит, что overflow-y/x: auto/visible и overflow-x/y: hidden преобразуются в overflow-x: hidden; overflow-y: hidden (читайте тут)
Вы не обрезали красный круг, а просто поставили поверх него padding определённой толщины жёлтого цвета. Так и я могу. Мне нужно этот круг не скрыть, а чтобы он не выходил за границы зеленого блока по горизонтали в принципе.
Сергей delphinpro, Вы и правда ничего не поняли что хотел человек. Вот чего многие пытаются добиться https://skr.sh/sQQCgjlvOwG что допустим если у контейнера стоит overflow: hidden; а внутри этого контейнера эдемент снизу по вертикали должен выходить за его границы. На скриншоте дорисовал что красный круг должен выходить снизу за overflow: hidden; а по горизонтали за синюю линию не должен.
Тут не больше фантазии нужно, а сперва разобраться чего хочет человек.
И чтоб вы знали для себя, такой возможности нет.
Сергей 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, вы опять не внимательны. Ну хорошо, вот вам задача.
При наведении на Ваш class="item"
1) он должен увеличиваться по высоте height: 120px;
2) он должен изменять фон на желтый background: yellow;
3) он должен расширяться по горизонтали захватывая в себя блок Ooops!!! на красном фоне, при этом размер ширины родителя не должен измениться. Только блок item должен расшириться поверх других блоков.
4) красный блок Ooops!!! должен оказаться внутри желтого фона, черная обводка также должна охватывать его.
5) убирать overflow: hidden; нельзя
Результат должен быть такой:
Или любой другой пример, взять в Ваш class="dropdown" положить текст, который также по умолчанию скрыт.
Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях.
При наведении на class="item" :
1) .item должен расширяться: width: 350px; height: 100px; и показываться поверх
2) фон желтый background: yellow; плюс Ваша обводка border: 3px solid black;
2) текст в dropdown должен появляться
3) убирать overflow: hidden; нельзя
4) результат:
Простой
