设置overflow-y:visible仍出现纵向滚动条，如何仅显示横向滚动条？

问题根源 #

CSS规范明确规定：当overflow-x设置为auto或scroll，同时overflow-y设置为visible时，浏览器会自动将overflow-y的实际值解析为auto——这就是y轴意外出现滚动条的原因。

解决方案：双层容器嵌套 #

通过外层容器处理横向滚动，内层容器承载内容并允许纵向超出外层显示，避免触发y轴滚动条。具体实现如下：

HTML结构

<div class="outer-scroll">
  <div class="content-wrapper">
    <!-- 你的内容，比如超宽文本、表格，以及纵向超出的元素 -->
    <div class="tall-item">纵向超出外层的内容</div>
    <div class="wide-item">超宽文本触发横向滚动：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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  </div>
</div>

CSS样式

.outer-scroll {
  width: 300px; /* 外层固定宽度，触发横向滚动 */
  height: 200px; /* 外层固定高度 */
  overflow-x: auto;
  overflow-y: hidden; /* 隐藏外层纵向滚动，避免触发滚动条 */
  border: 1px solid #ddd;
}

.content-wrapper {
  height: auto; /* 内层高度自适应内容，不受外层限制 */
}

.tall-item {
  height: 300px; /* 高度超出外层容器 */
  background-color: #f5f5f5;
  margin: 10px 0;
}

.wide-item {
  width: 500px; /* 宽度超出外层容器 */
}

原理说明 #

外层容器仅负责横向滚动逻辑，overflow-y: hidden会裁剪自身边界内的纵向内容，但内层容器的内容可以突破外层的高度限制，直接显示在容器外部，不会触发y轴滚动条。这样既实现了需要的横向滚动，又保证了纵向内容的正常显示。

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