html - 在 parent 的溢出中隐藏 div？

Question

我有一个带有 overflow:hidden; 的父容器，里面有 block ，我希望在父容器的溢出中“隐藏”其中的一些。

例如:

...| from here these are hidden off page

[ ] [ ] [ ] [ ] [ ]

上面我只希望第一个 block 出现在屏幕上，其他 block 在隐藏的溢出中。

我试过使用:

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

.parent {
    display: flex;
    overflow: hidden
}
.child {
    width: 100%;
}

但是 children 只是聚在一起并留在屏幕上。

Answer 1

您需要为父级设置一个宽度(可见宽度)，并在其中添加一个宽度更大的包装器(可见 + 隐藏宽度)...试试这个:

* {
  box-sizing: border-box;
}
.parent {
  width: 200px;
  height: 200px;
  padding: 20px;
  overflow-x: auto;
  background: grey;
}
.container {
  width: calc(3 * (200px - 20px));
  height: 100%;
  display: flex;
}
.child {
  width: calc(200px - 2 * 20px);
  margin-right: 20px;
  height: 100%;
  background: tomato;
}

<div class="parent">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>