如何完全隐藏垂直溢出容器的元素？

Question

我有一个固定的宽度和高度容器,由任意高度元素组成,需要垂直堆叠.如何隐藏任何不适合的元素？overflow: hidden仍然可以显示一个不会溢出的元素部分.

.container {
  border: 1px solid #eee;
  height: 200px;
  overflow: hidden;
}

.box {
  background-color: #ccc;
  line-height: 54px;
  margin: 20px;
  text-align: center;
  width: 60px;
}

.incorrect {
  background-color: #fa9;
}

<div class="container">
  <div class="box">show</div>
  <div class="box">show</div>
  <div class="box incorrect">hide</div>
</div>

Answer 1

假设您的子元素与容器具有相同的宽度,可以通过利用从flex属性创建的包含框来实现.

诀窍是flex-flow: column wrap;与overflow: hidden;容器一起使用.前者规定内容是垂直堆叠的,任何不适合的内容都应该包装在容器内容框之外的第二列中.后者规定应隐藏第二列(以及任何后续列).

.container {
  width: 300px;
  height: 200px;
  display: flex;
  flex-flow: column wrap;
  overflow: hidden;
}

.box {
  width: 300px;
  height: 75px;
}

.box:nth-child(1) {
  background: red;
}
.box:nth-child(2) {
  background: green;
}
.box:nth-child(3) {
  background: blue;
}

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