Chrome扩展自定义Dropdown展开时导致Popup尺寸异常问题求助

我正在开发一款带下拉菜单的Chrome扩展，为了更好控制文本样式，用div实现了自定义Dropdown。原生select标签在扩展外部能正常显示，但自定义Dropdown展开时会把Popup撑开。我做了最小复现示例，发现:root尺寸没变化，但Popup还是被撑开，给父元素设relative、子元素设absolute也没解决，请问问题出在哪？

核心问题是自定义下拉菜单的容器没脱离Chrome扩展Popup的文档流：

• 你给.parent加了relative，但.selector-menu是.selector-container的子元素，而.selector-container本身是absolute定位，但.selector-menu默认属于正常文档流，展开时会撑开.selector-container的高度，进而触发Popup自动调整尺寸（Chrome扩展Popup会自动适配内容高度）。
• 哪怕:root的样式没变化，只要文档流内元素高度改变，Popup就会跟着拉伸。

让下拉菜单完全脱离文档流，具体调整如下：

1. 给.selector-container设置position: relative，作为下拉菜单的定位参考
2. 给.selector-menu设置position: absolute，并通过top:100%定位在触发元素下方
3. 补充宽度和box-sizing避免溢出，添加z-index确保下拉菜单在最上层

修改后的CSS #

:root {
  border: 2px solid green;
}

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

.selector-container {
  position: relative; /* 改为relative，作为下拉菜单的定位父级 */
  background: #f0f0f0;
  padding: 8px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box; /* 防止padding导致宽度溢出 */
}

.selector-menu {
  display: none;
  position: absolute; /* 脱离文档流，不再占用Popup的内容空间 */
  top: 100%; /* 定位在触发元素正下方 */
  left: 0;
  right: 0;
  background: #ddd;
  margin-top: 4px;
  border: 1px solid #aaa;
  z-index: 100; /* 确保下拉菜单在最上层，不被其他元素遮挡 */
  box-sizing: border-box;
}

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

.menu-item {
  padding: 8px;
}

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

HTML（仅需引入CSS和JS，结构不变） #

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="parent">
    <div class="selector-container" id="selectorContainer">
      Selected Language
      <div class="selector-menu" id="dropdownMenu">
        <div class="menu-item">Detect Language</div>
        <div class="menu-item">English</div>
        <div class="menu-item">German</div>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

JS代码（无需修改） #

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

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

内容的提问来源于stack exchange，提问作者maribox