当div溢出时完全隐藏html节点

Question

如何完全隐藏已经开始溢出父HTML节点边界的HTML节点？

overflow:hidden的行为会部分隐藏该项目，但我愿意将其全部隐藏。

const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>JS Starter</h1>`;

h1,
h2 {
  font-family: Lato;
}

.item {
  font-size: 36px;
  border: 2px dashed red;
  padding: 1rem
}

.parent {
  display: flex;
  justify-content: space-evenly;
  border: 5px solid blue;
  overflow: hidden;
  padding: 1rem
}

<div id="app">asd</div>

<div class="parent">
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
</div>

这里是堆栈式闪电，表示部分隐藏的项目需要完全隐藏的情况：https://stackblitz.com/edit/js-gfxwtt

Answer 1

您可以启用自动换行并使用固定高度，这样您就不会看到应该溢出的元素，因为它们将落入下一行：

const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>JS Starter</h1>`;

h1,
h2 {
  font-family: Lato;
}

.item {
  font-size: 36px;
  border: 2px dashed red;
  padding: 1rem;
  margin-top:1rem;
}

.parent {
  display: flex;
  justify-content: space-evenly;
  border: 5px solid blue;
  overflow: hidden;
  flex-wrap:wrap;
  max-height: 90px;
  padding:0 1rem 1rem;
}

<div id="app">asd</div>

<div class="parent">
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
</div>