如何实现overflow-x:auto且overflow-y可见，避免绝对元素触发垂直滚动？

我有一个支持横向滚动的容器元素，其子元素中包含绝对定位元素——该元素位于父元素下方，导致页面出现了不必要的垂直滚动条。我需要实现以下效果：

• 容器内容保持横向滚动功能
• 绝对定位元素完全可见
• 不会触发垂直滚动

基础示例代码如下：

示例代码 #

CSS #

.container {
  width: 100%;
  max-width: 500px;
  background: red;
  overflow-x: auto;
  padding: 10px;
}

.wrapper {
  width: 700px;
  background: green;
  padding: 10px;
}

.relative {
  height: 50px;
  padding: 10px;
  background: purple;
  width: 100px;
  position: relative;
}

.absolute {
  position: absolute;
  top: calc(100% + 20px);
  background: blue;
  color: white;
  font-weight: bold;
  text-align: center;
  width: 100%;
  right: auto;
}

HTML #

<div class="container">
  <div class="wrapper">
    <div class="relative">
      <div class="absolute">
        absolute element
      </div>
    </div>
  </div>
</div>

期望效果：横向滚动正常，绝对定位元素可见且无垂直滚动（效果参考示意图：期望效果示意图）

注意：实际场景中绝对定位元素高度不固定，数量可能为0或多个，因此无法通过给父元素设置固定高度来解决垂直滚动问题。

核心思路是让绝对定位元素脱离容器的垂直溢出计算范围，同时保证其位置正确。可以通过以下方式实现：

修改后的代码 #

CSS #

.container {
  width: 100%;
  max-width: 500px;
  background: red;
  overflow-x: auto;
  overflow-y: visible; /* 显式设置垂直溢出可见 */
  padding: 10px;
  display: inline-block; /* 打破块级元素默认溢出规则，让overflow-y: visible生效 */
  min-width: 100%; /* 保持容器宽度占满父级 */
}

.wrapper {
  width: 700px;
  background: green;
  padding: 10px;
}

.relative {
  height: 50px;
  padding: 10px;
  background: purple;
  width: 100px;
  position: relative;
}

.absolute {
  position: absolute;
  top: calc(100% + 20px);
  background: blue;
  color: white;
  font-weight: bold;
  text-align: center;
  width: 100%;
  right: auto;
}

原理说明 #

• display: inline-block：改变容器显示类型，避免浏览器因设置overflow-x: auto而强制将overflow-y转为auto，让overflow-y: visible生效。
• min-width: 100%：确保inline-block类型的容器依然占满父元素宽度，保持原有布局。
• 绝对定位元素相对于.relative定位，不会被.container的垂直溢出裁剪，同时.container的垂直方向不会因绝对定位元素的存在出现滚动条。

如果display: inline-block不符合布局需求，也可以用contain: layout style替代：

.container {
  /* 其他样式保持不变 */
  overflow-y: visible;
  contain: layout style; /* 替代inline-block，让overflow-y生效 */
}

此方案既保留横向滚动功能，又能让绝对定位元素完全可见，且不会触发垂直滚动，同时适配绝对定位元素高度不固定、数量变化的场景。

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