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

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 创建的包含框来实现。属性(property)。

技巧是在容器上结合使用 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>