Как сделать так, чтобы выпадающий список правильно отображался за пределами контейнера с горизонтальной полосой прокрутки

Question

У меня есть выпадающий список, который я хотел бы правильно отобразить за пределами контейнера, который имеет горизонтальную полосу прокрутки.В настоящее время он «похоронен» внутри контейнера.

См. Демонстрацию: https://codepen.io/lzhoucs/pen/EdYgXr

Контейнер имеет жесткие ограничения:

width: 300px;
overflow-x: auto;

Мое единственное требование -решение должно работать с горизонтальной полосой прокрутки и, желательно, без JavaScript.

• См. попытку 1: https://codepen.io/lzhoucs/pen/KGPNpb. Эта версия работает, когда мы не прокручиваем.Он начинает работать, как только мы прокручиваем.

• См. Попытку 2: https://codepen.io/lzhoucs/pen/KGPNaE. Эта версия полностью ломает полосу прокрутки

Answer 1

Эта статья содержит довольно хорошее объяснение проблемы и предлагает обходной путь, хотя для этого все еще требуется, чтобы JS правильно позиционировал подменю: https://css -tricks.com / popping-hidden-overflow /

Но в вашем случае достаточно просто удалить position:relative из .dropdown - https://codepen.io/anon/pen/KGPWEx

Это связано с тем, что даже абсолютно позиционированные элементы просто занимают положение, которое они имели быв нормальном потоке, когда «координаты» (верхняя, левая, ...) не указаны явно, но оставлены с начальным значением по умолчанию auto.

(хотя это не будет работать, если любой элементов-предков дальше по дереву располагается - как если бы вы добавили position:relative для .container в вашем примере, он снова ломается. В таком случае, я думаю, вам, возможно, придется пойти на«полный» обходной путь, описанный в упомянутой статье.)