我想让溢出-x 隐藏和溢出-y 可见

如何解决我想让溢出-x 隐藏和溢出-y 可见

我被这个问题困扰了这么多天。我一直在努力实现的目标是这样的，

我有一个滑块 div 设置它的宽度和高度，其中我有作为孩子的盒子坐在彼此旁边。所以我希望滑块的水平溢出被隐藏（超出滑块宽度的框）。这可以通过隐藏溢出-x 轻松实现。但问题是当我悬停一个框时，我想扩展它的宽度和高度并显示更多内容，我希望它们垂直溢出滑块。因为隐藏的溢出不起作用。他们也被隐藏了。我想在不推动它的兄弟姐妹的情况下扩展该框的宽度和高度。示例就像 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/

解决方法

我认为您想这样做：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: orange;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
</head>
<body>
<div>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla </div>

</body>
</html>

如果你想这样做，那么你必须使用这些：

overflow-x:hidden;
overfloy-y:scroll;

这个没有引导程序的完整滑块

你可能需要这样的东西

无需引导程序即可工作。

如果可行，试试这个，喝点咖啡！ ;D

CSS

使用 class="mamOfmom" 作为其中的主要元素我制作了 overflow-x: scroll 使其横向滚动。

和 class="flex-container row" 使 孩子侧身弯曲。

并将 class="flex-item" 用于 child/Image。

HTML

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;

    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
}

.row { 
    -webkit-flex-direction: row; 
    flex-direction: row;
}

.flex-item {
    border-radius: 0.5em;
    padding: 5px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: table;

    line-height: 50px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

.mamOfmom{
    height: auto;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}