如何创建水平滚动div，避免overflow-y隐藏元素？

当给容器设置overflow-x: auto实现水平滚动时，浏览器会默认处理overflow-y的行为，导致容器内的绝对定位元素（如下拉菜单）超出容器垂直范围时被裁剪——即使显式设置overflow-y: visible也不会生效，因为CSS规范中明确：当overflow-x为scroll/auto时，overflow-y: visible会被强制解析为auto。

要解决这个问题，核心思路是将绝对定位元素的定位上下文转移到滚动容器的父元素，避免被滚动容器的overflow规则限制，具体实现步骤如下：

实现方案 #

1. 给滚动容器的父元素设置position: relative，作为下拉菜单的定位上下文
2. 调整下拉菜单的定位规则，基于父容器进行定位，而非滚动容器内的子元素
3. 如果需要下拉菜单跟随滚动容器内的具体元素（如标签），可通过JS计算元素位置，动态设置下拉菜单的偏移量

代码示例 #

HTML结构 #

<div class="chips-wrapper">
  <div class="chips">
    <div class="chip">
      标签1
      <div class="dropdown">下拉菜单选项1</div>
    </div>
    <div class="chip">标签2</div>
    <div class="chip">标签3</div>
    <div class="chip">标签4</div>
    <div class="chip">标签5</div>
    <!-- 更多标签 -->
  </div>
</div>

CSS样式 #

.chips-wrapper {
  position: relative; /* 作为下拉菜单的定位上下文 */
  width: 400px; /* 限制容器宽度，触发水平滚动 */
}

.chips {
  white-space: nowrap;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid #eee;
}

.chip {
  display: inline-block;
  padding: 6px 12px;
  margin-right: 8px;
  background: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
}

.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 0;
  width: 180px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
}

.dropdown.show {
  display: block;
}

JS辅助定位（可选） #

如果需要下拉菜单跟随点击的标签位置，可通过JS计算标签的偏移量：

document.querySelectorAll('.chip').forEach(chip => {
  chip.addEventListener('click', () => {
    const dropdown = chip.querySelector('.dropdown');
    // 获取标签相对于父容器的偏移量
    const chipLeft = chip.getBoundingClientRect().left - document.querySelector('.chips-wrapper').getBoundingClientRect().left;
    dropdown.style.left = `${chipLeft}px`;
    dropdown.classList.toggle('show');
  });
});

原理说明 #

绝对定位元素的显示范围由其包含块（即最近的position不为static的祖先元素）决定。如果包含块是设置了overflow-x: auto的滚动容器，那么超出容器范围的绝对定位内容会被裁剪。将包含块切换为滚动容器的父元素后，下拉菜单的显示范围不再受滚动容器的overflow限制，就能正常展开显示。

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