обойти overflow hidden [закрыт]

162

19 ноября 2020, 19:40

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 1 год назад.

Улучшить вопрос

Есть блок. Имеет вид строки таблицы с ячейками. К этому блоку применен горизонтальный скролл. в чем проблема?

при Нажатии на последний блок(ячейку) этой строки, появляется дропдаун. При появлении дропдауна появляется вертикальный скролл, а сам дропдаун прячется при выходе за пределы родителя

.scroll-container
    .headerTable
    .contentTable
        .wrapperItem
            .tableItem
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                .item-ItemTable
                    .wrapper-drop
                        .icon
                        .actionDropDown
    .scroll-x
    .scroll-y

все элементы div'ы

Answer 1

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

Чтобы содержимое элемента выходило за его пределы, элемент должен иметь свойства overflow-x:visible; overflow-y:visible; (это свойства дивов по умолчанию, если что). И, да, абсолютное позиционирование тут не поможет.

Если у вас возникла необходимость чтобы контейнер скроллился по одному направлению, но вел себя как overflow:visible по другому, вам придется хорошенько поизвращаться с дополнительными элементами и скриптами... ну или сделать изначально по-человечески - так, чтобы подобной необходимости не возникало.