dynamic flexbox drafting hidden elements
/*-------JavaScript------*/
let cardWidth = document.querySelector('.card').offsetWidth; // or 300
let tagsWidth = 0;
let hiddenItems = 0;
document.querySelectorAll('.tag').forEach((tag, i) => {
tagsWidth += tag.offsetWidth;
if( tagsWidth + 60 > cardWidth ){
hiddenItems++;
tag.style.display = 'none';
}
})
if( hiddenItems > 0 ){
document.querySelector('.card').insertAdjacentHTML('beforeend', `<div class="tag">${hiddenItems}+</div>`)
}
/*--------CSS---------------*/
*,*::before,*::after {
box-sizing: border-box;
}
.card {
padding: 5px;
width: 300px;
height: 300px;
border: 2px solid blue;
display: flex;
align-items: flex-start;
gap: 5px;
}
.tag {
padding: 5px 8px;
color: #2C3C93;
background: rgb(44, 60, 147, 0.1);
white-space: nowrap;
}
/*----HTML--------------------------*/
<div class="card">
<div class="tag">Developing</div>
<div class="tag">Busniess</div>
<div class="tag">Web Design</div>
</div>