Как быть с overflow:hidden у слайдера?

Question

[Александр Белькевич]

Добрый день. Есть такой элемент дизайна

Проблема в том, что все слайдеры добавляются overflow:hidden (я предпочитаю использовать slick, но смотрел разные). Следовательно, спозиционировать всплывающие данные не получается, они обрезаются. Как можно побороть это?

Comments

[Kovalsky]

Скрывать overflow только по x

[Александр Белькевич]

Никита Полевой: к сожалению, не срабатывать

[Kovalsky]

Александр Белькевич: вы просто посмотрите на скриншот: по нему видно что нужно скрывать то, что выходит за рамки слайдера (и контейнера) по горизонтали, но не скрывать то, что выходит за рамки слайдера (и контейнера) по вертикали.

[Александр Белькевич]

Никита Полевой: Я понимаю. но не срабатывает

[Kovalsky]

Александр Белькевич: хорошо, тогда делайте живой пример в котором будет понятно в чем у вас проблема

[Юнус Газиев]

Александр Белькевич: Необходимо прописать overflow для каждой оси отдельно, т.к. конейнеру уже задан общий overflow:hidden

[Сергей delphinpro]

Никита Полевой:

Скрывать overflow только по x

1,5 года... ага... =)

[Kovalsky]

Сергей: wut?

[Volonteer]

Вопрос до сих пор актуален, мне помогло вот такое решение

.draggable {
        overflow-y: visible !important;
    }

Answer 1

[Александр Моргунов]

1. Плохая привычка использовать !important. Нужно сделать overflow-x: hidden. А у элемента overflow-y: hidden. Но при ховере overflow-y делать visible. При условии, что контент, который нужно показывать будет присутствовать.
2. Либо, оставить overflow-x: hidden у родителя, у слайда overflow-y: hidden, но при наведении на последний увеличивать высоту. А чтобы она увеличивалась красиво, использовать свойство transition.