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

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>