Можно ли задать разные oveflow-x, -y не auto?

Question

[Viktor Vsk]

Допустим, есть блок шириной 10000 px, высотой 500 пикселей (parent). В блоке есть инлайн элементы (child), при наведении на который его высота становится произвольно более 500 пикселей. Изначально используется overflow hidden и, следовательно, элемент child при наведении просто обрезается до 500 пикселей.

Если parent присвоить overflow: visible, то по вертикали будет что надо, а вот горизонталь перестанет быть hidden. так же, если присвоить overflow-y: visible, то появится дополнительный скроллбар. Почитал, что это связано с тем, что браузеры как-то особенно интерпретируют overflow, если указаны различные значения для x и y (кстати, зачем так?).

Как выйти из этой ситуации? Нужно как-то извращаться с position absolute?

Если не абстрактно, то есть bxslider, который нужно крутить влево-вправо, а вот его элементы при наведении должны расширяться и выходить за пределы контейнера.

Извините, что без фиддла. Вот демонстрация примера: evotex.kh.ua ("новинки", "популярно", "хиты"). Одновременно присвоить:
overflow-y: visible
overflow-x: hidden
Не получается - все возвращается к изначальному виду

Answer 1

[Daneel1798]

overflow-x: auto | hidden | scroll | visible
Источник

Comments

[Viktor Vsk]

Спасибо, кэп, но можно иногда читать описание, а не только заголовок :) css-tricks.com/popping-hidden-overflow

Answer 2

[Назар Мокринский]

Поигрался я с вашей страницей - куча float - это плохо.
В данной ситуации я бы решил вопрос с помощью JS. При наведении накладывал поверх ещё один такой же блок с абсолютным позиционированием.

Comments

[Viktor Vsk]

Флоат, к сожалению, добавляется слайдером.
Да, именно js и делаю, но, конечно, с учетом того, что и так появляется блок с тенью поверх других, то как-то производительность падает. Пробовал клонировать нод, на который навел, но так и не получилось нормально его удалять - остаются артефакты, если быстро наводить на разные элементы.
Сейчас пробую дважды риендерить элементы - 1 раз в блоке слайдера, 1 раз в body с display none. И меня display:none и position на соответсвующие при наведении.