完全隐藏不完全适合其父级可见部分的块元素

Question

假设我在容器中有三个块元素。黑线表示容器。蓝色框是其中的三个块元素。

这三个元素并不合适。如果我在外部元素上设置overflow: hidden，我会看到前两个元素，部分是第三个元素。

我想要的是，只显示完全适合容器的元素。

这可以用CSS吗？

Answer 1

是的Flexbox是可以的，您需要设置flex-direction: column，flex-wrap: wrap和overflow: hidden。

此外，您需要在flex-childs上设置全宽或calc(100% - margin)，这样当最后一个元素包装自身时，它将超出父元素，而父元素上的overflow: hidden将处理休息。

* {
  box-sizing: border-box;
}
.container {
  height: 200px;
  width: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: hidden;
}
.box {
  flex: 0 0 70px;
  width: calc(100% - 10px);
  margin: 5px;
  background: #46A1FF;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>