How to collapse elements into a spoiler when they go beyond the width of the screen at all resolutions?

Question

JavaScript

Good afternoon!
There is a block with elements, conditionally with tags, the number of these elements can constantly change reactively, since these tags appear if the user has selected filters. I need to make sure that as soon as the added element does not fit into the width of the current resolution window, it hides in the spoiler and the "more" button appears. All elements up to this button remain in their places, and new ones are hidden in the spoiler if they do not fit. The width of the screen, respectively, can be any, the elements also do not have a fixed width, but they cannot be more than 220px.

I look forward to any ideas on how to implement this and in what direction to move.

Answer 1

Look at this https://codepen.io/Dmitry_Novik/pen/rNzYpJp
Written of course not very beautifully, but solves your problem.
Pay attention to the lines:

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';
  }

Here the block is taken, it is checked whether the elements leave the block and shows "show more"