overflow-x:auto搭配overflow-y:visible异常，求tooltip不被裁剪实现方案

问题现状 #

当前使用的CSS代码：

.iati-list-table {
    overflow-x: auto;
    overflow-y: visible;
}

遇到的矛盾：

• 设置overflow-y: visible时，y轴会自动出现不必要的滚动条
• 设置overflow-y: hidden时，元素的tooltip会被容器裁剪

需求：实现x轴超出时显示滚动条，同时y轴无滚动条，且tooltip等超出容器的元素能正常显示不被裁剪。

原因说明 #

根据CSS规范，当容器的某一个overflow轴设置为auto/scroll/hidden时，另一个轴的visible会被浏览器强制解析为auto，这就是设置overflow-y: visible却出现滚动条的核心原因。

解决方案：嵌套容器分离滚动逻辑 #

通过增加一层外层容器，将x轴滚动限制在内层，外层保持默认的overflow: visible，即可同时满足两个需求：

调整后的HTML结构

<div class="table-wrapper">
  <div class="iati-list-table">
    <!-- 你的表格或目标内容 -->
  </div>
</div>

对应的CSS代码

.table-wrapper {
  /* 保持默认overflow: visible，允许tooltip等元素超出容器显示 */
}
.iati-list-table {
  overflow-x: auto;
  /* 无需设置overflow-y，默认值为visible，且外层无裁剪限制 */
}

原理 #

外层容器不设置任何overflow限制，确保y轴方向的元素（如tooltip）可以正常超出容器范围显示；内层容器仅设置overflow-x: auto，负责处理x轴的滚动需求，同时因为未指定overflow-y属性，且外层没有裁剪约束，y轴不会出现不必要的滚动条，内容也不会被截断。

如果不想增加嵌套容器，也可以尝试仅保留overflow-x: auto，不设置overflow-y，同时确保容器高度自适应内容（不要设置固定高度），部分场景下也能生效，但嵌套容器的方法兼容性更稳定。

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