CODEWITHSUNDEEP
htmlcssflexboxoverflow
Suhayb
Suhayb

Reputation: 3271

Completely hide html node when it overflows div

How can I completely hide an HTML node that has started to overflow a parent HTML nodes boundaries?

overflow:hidden behavior partially hides the item, but I am willing to hide it all.

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>

Here is stack-blitz indicates the case where partially hidden item needs to be completely hidden: https://stackblitz.com/edit/js-gfxwtt

Upvotes: 2

Views: 60

Answers (1)

Temani Afif
Temani Afif

Reputation: 272779

You can enable the wrap and use a fixed height so you don't see the element that should overflow because they will fall into the next line:

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>

Upvotes: 1

Related Questions