轮播容器设置overflow-x:hidden、overflow-y:visible不生效的问题咨询

问题根源 #

CSS 规范明确规定：当同一个元素的overflow-x和overflow-y属性中，一个取值为hidden另一个取值为visible时，visible会被浏览器强制重置为auto，因此你原本的配置逻辑本身就不符合浏览器渲染规则，自然无法实现X轴隐藏溢出、Y轴保留溢出的效果。

可行解决方案 #

使用clip-path属性替代overflow实现你要的裁剪效果，具体修改点如下：

• 移除.container原有overflow-x: hidden配置
• 给.container添加上下内边距，预留足够空间显示hover缩放后Y轴溢出的内容
• 给.container添加clip-path: inset(-100px 0 -100px 0)规则：该规则会直接裁剪左右超出容器边界的内容，同时保留上下100px范围内的溢出内容，完全匹配需求
• 删除.wrapper中无用的overflow-y: visible配置

修改后完整代码 #

CSS

:root {
  --item-margin: 5px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 80vw;
  margin-top: 60px;
  /* 上下预留足够空间放缩放后的溢出内容 */
  padding: 70px 0;
  /* 核心规则：左右超出裁剪，上下100px内溢出保留 */
  clip-path: inset(-100px 0 -100px 0);
}

.wrapper {
  height: 90%;
  display: flex;
  position: relative;
  left: calc(-20% - 5px);
  transition: .5s ease all;
}

.left-arrow,
.right-arrow {
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
  width: 50px;
  height: 50px;
  background: #ED4956;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.left-arrow {
  left: 2%;
  top: 50%;
}

.right-arrow {
  left: 98%;
  top: 50%;
}

.child {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 250px;
  width: 20%;
  font-weight: bold;
  font-size: 4rem;
  transition: .4s ease transform;
}

.child {
  margin-right: var(--item-margin);
}

.child:hover {
  transform: scale(1.5);
}

.child1 {
  background: green;
}

.child2 {
  background: blue;
}

.child3 {
  background: yellow;
}

.child4 {
  background: navy;
}

.child5 {
  background: red;
}

.child6 {
  background: pink;
}

.child7 {
  background: grey;
}

.child8 {
  background: brown;
}

.child9 {
  background: #ff80ed;
}

@media (max-width: 1400px) {
  .child {
    width: calc(25% - var(--item-margin));
  }
  .wrapper {
    left: -25%;
  }
}

HTML

<div class="container">
  <div class="wrapper">
    <div class="child child1">1</div>
    <div class="child child2">2</div>
    <div class="child child3">3</div>
    <div class="child child4">4</div>
    <div class="child child5">5</div>
    <div class="child child6">6</div>
    <div class="child child7">7</div>
    <div class="child child8">8</div>
    <div class="child child9">9</div>
  </div>
  <div class="left-arrow"> &larr; </div>
  <div class="right-arrow"> &rarr; </div>
</div>

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