设置overflow-x:hidden后子元素hover上移部分被隐藏的问题解决

问题现象 #

给父元素.offers-parent设置height:185px、overflow-x:hidden、overflow-y:visible后，子元素.offers-child在hover时通过transform: translateY(-10px)上移，但上移的10px部分被父元素裁剪隐藏，移除overflow属性后恢复正常，需要在保留overflow-x:hidden的前提下解决这个问题。

问题原因 #

CSS规范里有个容易被忽略的规则：当你为元素同时设置overflow-x和overflow-y时，只要其中一个属性的值不是visible，另一个设置为visible的属性会被浏览器强制覆盖为auto或scroll（不同浏览器表现略有差异，但都会变成裁剪模式）。这里.offers-parent设置了overflow-x:hidden（非visible值），所以overflow-y:visible根本不生效，浏览器自动把overflow-y改成了裁剪属性，导致子元素上移超出父元素高度的部分被隐藏。

解决方法 #

把overflow-x:hidden的作用从.offers-parent转移到内部的.offers-child-wrapper容器上，让.offers-parent只负责固定高度，不承担横向裁剪的职责，这样overflow-y就能保持默认的visible状态，子元素hover上移的部分就能正常显示。

修改后的代码示例 #

CSS

.page-wrapper {
  margin-top: 20px;
  border: solid 1px;
}

.offers-parent {
  height: 185px;
  /* 移除overflow-x，保留height即可，overflow-y默认是visible */
}

.offers-child-wrapper {
  overflow-x: hidden; /* 把横向裁剪移到这个容器上 */
  height: 100%; /* 继承父元素高度 */
}

.offers-child {
  width: 310px;
  height: 185px;
  background: red;
  cursor: pointer;
  transition: transform 0.2s; /* 加个过渡更顺滑，可选 */
}

.offers-child:hover {
  transform: translateY(-10px);
}

HTML

<div class="page-wrapper">
  <div class="offers-parent">
    <div class="offers-child-wrapper">
      <div class="offers-child"></div>
    </div>
  </div>
</div>

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