html节点溢出时完全隐藏div

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>

这里是 stack-blitz 表示需要完全隐藏部分隐藏项的情况：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>