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

Question

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

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

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

这可以用 CSS 实现吗？

Answer 1

是的，Flexbox 是可以的，你需要设置 flex-direction: column , flex-wrap: wrap 还有 溢出:隐藏。

此外，您还需要在 flex-childs 上设置全宽或 calc(100% - margin)，这样当最后一个元素包裹自己时，它将超出父元素并且 overflow: hidden parent 将负责休息。

* {
  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>