Раскрывающийся список расширений Chrome меняет размер всплывающего окна при открытии ⇐ CSS

[Anonymous]

Итак, я создаю расширение с раскрывающимся меню, но поскольку я хочу управлять текстом лучше, чем с помощью выбора, я хочу создать собственное расширение с помощью элементов div.
Сейчас тег select не создает никаких проблем, как видите, он отображается за пределами расширения, но когда я пытаюсь отобразить собственный, всплывающее окно расширяется:


Я попытался представить это в минимально воспроизводимом примере, который также включил в расширение:



Как видите, размер :root не меняется, но всплывающее окно по-прежнему расширяется. Как это возможно? Что я делаю неправильно? Родительский элемент является относительным, а дочерний абсолютным, это неверно?

Код: Выделить всё

function toggleDropdown() {
document.getElementById("dropdownMenu").classList.toggle("show");
}

document
.getElementById("selectorContainer")
.addEventListener("click", toggleDropdown);

Код: Выделить всё

:root {
border: 2px solid green;
}

.parent {
position: relative;
border: 2px solid red;
padding: 8px;
width: 200px;
height: 32px;
}

.selector-container {
position: absolute;
background: #f0f0f0;
padding: 8px;
cursor: pointer;
}

.selector-menu {
display: none;
background: #ddd;
margin-top: 4px;
border: 1px solid #aaa;
}

.selector-menu.show {
display: block;
}

.menu-item {
padding: 8px;
}

.menu-item:hover {
background: #ccc;
}

Код: Выделить всё

Selected Language

Detect Language
English
German

Подробнее здесь: https://stackoverflow.com/questions/792 ... hen-opened