прокрутка в пределах переполнения: видимая; div, когда содержимое ребенка превышает родительскую высоту

Question

У меня есть навигационное меню боковой панели с дочерними и дочерними элементами, которые появляются при наведении. Вот ссылка jsfiddle: https://jsfiddle.net/s096zfpd/

Это, очевидно, значительно упрощено, чтобы дать представление о том, чего я пытаюсь выполнить. Моя проблема заключается в том, что иногда список в пределах <nav> превышает высоту <nav>. В этом случае я хочу иметь возможность прокручивать в пределах <nav>, но это может скомпрометировать свойство overflow-x:visible, которое мне нужно отобразить .sub-nav, поскольку CSS просто не разрешает одновременное использование overflow-x:visible и overflow-y:scroll.

Я думаю, что, возможно, решение js может хорошо работать здесь. Какие-либо предложения?

Спасибо.

Answer 1

Если вы используете видимый для overflow-x или overflow-y и что-то иное, чем видимое для другого. Видимое значение интерпретируется как автоматическое Это означает, что мы не можем применить видимыми и скрытым в этот DOM элемент, поэтому идеальное решение было бы

• Чтобы создать оболочку, а затем применить overflow-x и overflow-y к двум различным элементам DOM. Совместное решение JS скрипку вашей проблемы

  https://jsfiddle.net/e2edvupc/