Как сворачивать элементы в спойлер, когда они выходят за ширину экрана на всех разрешениях?

Question

[Арсений]

Добрый день!
Есть блок с элементами, условно с тегами, количество этих элементов может постоянно реактивно меняться, так как эти теги появляются если пользователь выбрал фильтры. Мне необходимо сделать так, чтобы как только добавленный элемент стал не помещаться в ширину окна текущего разрешения, он прятался в спойлер и появлялась кнопка "ещё". Все элементы до этой кнопки остаются на своих местах, а новые прячутся в спойлер, если не помещаются. Ширина экрана соответственно может быть любой, у элементов также нет жесткой ширины, но они не могут быть больше 220px.

Очень жду любые идеи как такое реализовать и в каком направлении двигаться

Answer 1

[Dmitry_Novik]

Посмотрите на это https://codepen.io/Dmitry_Novik/pen/rNzYpJp
Написал конечно не очень красиво, но решает вашу проблему.
Внимание на строки:

var a = document.querySelector('.content');

  var ale = a.scrollWidth > a.offsetWidth ||
    a.scrollHeight > a.offsetHeight;
  if (ale == true){
    var elems=document.getElementsByClassName('show-more');
for(var i=0; i<elems.length; i++)elems[i].style.display='block';
  }else{
    var elems=document.getElementsByClassName('show-more');
for(var i=0; i<elems.length; i++)elems[i].style.display='none';
  }

Тут берется блок, проверяется выходят ли элементы из блока и показывает "показать еще"