如何让放大的div可视溢出且父元素无滚动条（x/y溢出行为不同）

问题原因 #

CSS规范里有个规则：当父元素设置了overflow-x: scroll（或其他非visible的overflow-x值）时，overflow-y: visible会被浏览器强制解析成auto，这就是为什么你的section会出现y轴滚动条，放大后的div也没法完全显示。

解决方案 #

给每个要放大的div外层套一个容器，让放大变换作用在内层元素上。因为transform是视觉层面的变换，不会改变元素的布局盒模型，外层容器保持原布局尺寸，就能绕开父元素overflow的限制，让放大后的内容完整展示。

修改后的代码 #

CSS

section {
  background: grey;
  overflow-x: scroll; /* 保留原有设置 */
  overflow-y: visible;

  width: 100vw;
  display: flex;
  gap: 1rem;
}

.item-wrapper {
  height: 100px;
  min-width: 300px;
}

.item-wrapper div {
  background: red;
  transition: transform 0.1s ease-in-out;
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.item-wrapper:hover div {
  transform: scale(1.5);
}

HTML

<section>
  <div class="item-wrapper">
    <div>1</div>
  </div>
  <div class="item-wrapper">
    <div>2</div>
  </div>
  <div class="item-wrapper">
    <div>3</div>
  </div>
</section>

说明 #

• 外层.item-wrapper负责维持原有布局尺寸，保证section的横向滚动功能正常
• 内层div负责展示内容和悬停放大效果，transform变换不会影响外层容器的布局，因此不会触发section的y轴滚动
• 最终效果：section横向滚动正常，hover时div完整放大显示，无y轴滚动条

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