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

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>

Answer 2

一个简单的方法是使用 CSS columns 而不是 flex。

只需使用等于容器宽度的 column-width。在 child div 上应用 break-inside: avoid。你去吧。

它解决了所有问题：

[..]have a fixed width and height container that consists of arbitrary height elements that need to be stacked vertically. How can I hide any elements that do not fit?

您可以注意到红色 div（最后一个）完全隐藏了。

示例代码段：

* { box-sizing: border-box; margin: 0; padding: 0; }
.container {
  border: 1px solid #999;
  height: 200px; width: 300px; 
  overflow: hidden;
  column-width: 300px; 
}
.box {
  padding: 8px; text-align: center; color: #fff;
  width: 250px; height: 80px;
  break-inside: avoid
}
.box:nth-child(1) { background: #3b3; }
.box:nth-child(2) { background: #33b; width: 200px; height: 75px; }
.box:nth-child(3) { background: #b33; }

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

注意： 截至目前，Firefox 仍然是一个有 CSS 列的问题区域。 break-inside，虽然documented on MDN, is buggy in Firefox. The bug is still open: https://bugzilla.mozilla.org/show_bug.cgi?id=549114.

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

How can I completely hide elements that overflow their container vertically?

html

css

overflow