Как сделать так, чтобы абсолютно позиционированный элемент внутри относительного элемента не расширял родительское прост ⇐ CSS

[Anonymous]

У меня есть компонент автозаполнения, с которым я работаю (понижение + реакция-виртуализация), и раскрывающийся список:
[*]Изменение размера родительского элемента div. [*]Не выходит из родительского контейнера.
Как заставить их работать?

Вот примерно то, что у меня есть:

const input = document.querySelector('.input') const dropdown = document.querySelector('.dropdown') dropdown.style.display = 'нет' input.addEventListener('click', (e) => { е.preventDefault() e.stopPropagation() dropdown.style.display = 'блокировать' }) window.addEventListener('click', (e) => { е.preventDefault() e.stopPropagation() dropdown.style.display = 'нет' }) .form { Z-индекс: 1000 пикселей; /* имитирует систему, которая есть в моем приложении */ фон: розовый; } .scroller { переполнение: авто; высота: 300 пикселей; } .автозаполнение { положение: относительное; } .вход { дисплей: блок; ширина: 300 пикселей; фон: голубой; } .input-контейнер { положение: относительное; ширина: 300 пикселей; } .икона { позиция: абсолютная; справа: 10 пикселей; верх: 0 пикселей; } .падать { позиция: абсолютная; z-индекс: 2000 пикселей; фон: зеленый; } .список { высота: 400 пикселей; /* правда, я использую JS для вычисления размера */ } .элемент { высота: 100 пикселей; отступ: 8 пикселей; дисплей: гибкий; выровнять-элементы: по центру; } .item:наведите { фон: #fcfcfc; } .вещи { z-индекс: 1500 пикселей; фон: желтый; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum. ▾ элемент 1 элемент 2 пункт 3 пункт 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Что я делаю не так? Как я могу заставить раскрывающийся список упасть на родительский элемент, а не сдвинуть содержимое вниз? Значения z-index имитируют сложную структуру моего приложения.

В прокрутке есть overflow: auto, который кажется основным виновником, но я хочу, чтобы это была отдельная область прокрутки, просто с выпадающим списком. над этим и не сбрасывает контент. «Как заставить абсолютную позицию выходить за пределы автоматического переполнения?» Возможно, https://front-back.com/how-to-make-abso ... en-parent/ поможет...
[*]Расширение позиции абсолютного элемента div за пределы скрытого элемента div переполнения