Как показать абсолютно спозиционированный блок поверх блока с прокруткой?

Question

[Андрей]

Привет, не знаю, как сформулировать вопрос для гугла, поэтому покажу наглядно.
Пример

В блоке с overflow-y: auto, блок .absolute добавляет горизонтальную прокрутку. Мне же нужно, чтобы он показывался поверх, так, как если бы не было прокрутки. overflow-x: visible выглядит, как решение, но почему-то не работает.

Comments

[n1ksON]

overflow-x: visible выглядит, как решение, но почему-то не работает.

Имеете ввиду, что в вашем проекте это не срабатывает?

[Андрей]

n1ksON, это не срабатывает в Codepen)

[Андрей]

n1ksON, даже больше, это в принципе не работает с overflow-y

[Евгений]

Андрей, т.е. вам нужно абсолютом натянуть блок на блок с прокруткой, но чтобы он не прокручивался по х?) Может его вынести перед блоком с прокруткой? И опустить?

[Андрей]

Евгений, не совсем понял ваше предложение, поэтому уточню, какая задача у меня стоит.

Есть модалка фиксированной ширины и высоты. Её содержимое может превысить высоту и для этого установлен overflow-y: auto. Однако, внутри этой формы есть самописный select с выпадающим списком с опциями. Выпадающий список абсолютно спозиционирован, при его открытии его границы выходят за границы модалки и таким образом вызывают появление горизонтального скролла. В целом, на codepen я изобразил именно то, что происходит, просто статично.

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

[Евгений]

Андрей, угу... но ведь позишн абсолют выбивает из потока? Но т.к.это модалка - то получается селект остается как бы внутри блока а не поверх? Так?) С z-index пробовали поиграться? Селект можно выносить за пределы формы?

Answer 1

[Арсений Матыцин]

Я не тебе ли недавно это расписывал? *подозрительно смотрит*

Выноси по логике:
→relative
→→overflow
→→absolute

Comments

[Андрей]

Не мне.
Что, если я не могу вынести компонент за пределы overflow? Это отдельный vue компонент, я не могу взять из него абсолютно спозиционированный блок и вынести за overflow, увы. Решение-то логичное, но кейс не тот

[Арсений Матыцин]

Андрей, vue компонент базируется внутри единственного родителя, это вполне вписывается в логику описанную выше, все, что надо — развести данные. Кейс вполне тот.

[Андрей]

Арсений Матыцин, тогда я не совсем понимаю ваше предложение и значение фразы "развести данные")

[Арсений Матыцин]

Ля

<template>
    <div class="relative">
        <div class="overflow">[Содержимое, которое должно скролиться]</div>
        <div class="absolute">[Содержимое для абстолютноспозиционированного элемента]</div>
    </div>
<template>