html - 我想让overflow-x隐藏并且overflow-y可见

Question

我被这个问题困扰了很多天了。我一直试图实现的目标是这样的，

我有一个 slider div，设置了它的宽度和高度，其中我有一些盒子作为 child 彼此相邻。所以我希望隐藏 slider 的水平溢出(超出 slider 宽度的框)。这可以通过隐藏overflow-x轻松实现。但问题是，当我将鼠标悬停在一个框上时，我想扩展它的宽度和高度并显示更多内容，并且我希望它们垂直溢出 slider 。因为隐藏的溢出不起作用。他们也被隐藏起来了。我想扩大该盒子的宽度和高度，而不插入它的 sibling 。例子就像 Netflix 展示它的电影一样。当您将鼠标悬停在电影上时，它会展开并显示更多内容。

这是我迄今为止能够实现的目标

.wrapper {
  width: 80%;
  height: 8rem;
  border: 3px solid green;
  margin: 4rem auto;
}
.slider {
  display: flex;
  overflow-x: hidden;
}
.boxes {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.box-container {
  position: relative;
}
.box {
  width: 8rem;
  height: 8rem;
  background: purple;
  margin-right: 3px;
  transition: all 0.4s;
}
.box:hover {
  height: 20rem;
  width: 15rem;
}




<div class="wrapper">
      <div class="slider">
        <div class="boxes">
          <div class="box-container">
            <div class="box"></div>
          </div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
        </div>
      </div>
    </div>

这就是我想要完成的https://demo.vodlix.com/

Answer 1

overflow-y: visible;
overflow-x: clip;