设置overflow-x:visible与overflow-y:auto失效问题求助

嘿，我完全懂你遇到的这个麻烦——明明给LeftMenu设置了overflow-x: visible，想让tooltip能跳出侧边栏显示，结果它还是被截断了对吧？这其实是CSS里一个容易踩的坑，我之前也碰到过！

问题根源 #

当你给一个元素同时设置overflow-y: auto（或scroll）和overflow-x: visible时，浏览器会自动把overflow-x改成auto，这是CSS规范里的默认行为，所以你的visible设置根本没生效，tooltip自然就被侧边栏的横向裁剪给挡住了。

先把你的代码整理一下方便查看：

原HTML结构

<div className="LeftMenu">
  <div style={{position:relative}}>
    <div className="icon-Back-office-icons_Logout1"></div>
    <span className="tooltiptext">Name 1</span>
  </div>
  <div style={{position:relative}}>
    <div className="icon-Back-office-icons_Logout2"></div>
    <span className="tooltiptext">Name2</span>
  </div>
</div>

原CSS样式

.LeftMenu {
  background-color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 24px;
  padding-bottom: 25px;
  height: 100%;
  z-index: 100;
  width: 100px;
  position: fixed;
  overflow-x: visible;
  overflow-y:auto;
}

.tooltiptext:hover {
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

解决方案：拆分滚动容器与溢出容器 #

最稳妥的办法是把侧边栏的滚动逻辑和tooltip承载逻辑分开，让LeftMenu本身不负责滚动，而是在内部加一个专门的滚动容器。这样LeftMenu的overflow-x: visible就能正常生效，tooltip也就可以超出侧边栏显示了。

修改后的代码如下：

调整后的HTML结构

<div className="LeftMenu">
  <!-- 新增内部滚动容器 -->
  <div className="scroll-container">
    <div style={{position:relative}}>
      <div className="icon-Back-office-icons_Logout1"></div>
      <span className="tooltiptext">Name 1</span>
    </div>
    <div style={{position:relative}}>
      <div className="icon-Back-office-icons_Logout2"></div>
      <span className="tooltiptext">Name2</span>
    </div>
    <!-- 这里可以继续加更多子元素 -->
  </div>
</div>

调整后的CSS样式

.LeftMenu {
  background-color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 24px;
  padding-bottom: 25px;
  height: 100%;
  z-index: 100;
  width: 100px;
  position: fixed;
  overflow-x: visible; /* 现在这个设置会正常生效了 */
  /* 移除原来的overflow-y:auto，交给内部容器处理 */
}

/* 内部滚动容器负责垂直滚动 */
.scroll-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

/* 补充tooltip默认隐藏逻辑，原来的代码只写了hover样式没控制显示 */
.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

/* 父元素hover时显示tooltip */
.scroll-container > div:hover .tooltiptext {
  visibility: visible;
}

为什么这样有效？ #

现在LeftMenu本身不再处理垂直滚动，它的overflow-x: visible不会被浏览器强制修改，而内部的scroll-container只负责子元素的垂直滚动，tooltip的父元素属于LeftMenu层级，自然就能突破侧边栏的横向限制显示出来了。

另外我还补充了tooltip的显示隐藏逻辑，原来的代码里只定义了hover时的样式，但没设置默认隐藏，这样tooltip会一直显示，现在调整后只有鼠标悬浮时才会出现，更符合预期。

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