I have two slides of icons and how to move the icons to next slide when the icons are overflowing in first slide at different resolutions?

Question

I have attached the sample problem here

https://stackblitz.com/edit/angular-rucsuw

When the screen size reduces the icons overflow out of the container and I want the overflowing items to get displayed in the next slide

This is how it is displayed in bigger screen size

When the window size is smaller it overflows like this

I want to display the icons which are overflowing in the next slide.

How can I calculate and move the overflowing items to next slide?

It should be responsive too. Any idea how to implement this ?

Any help would be appreciated!

Answer 1

Either you can give overflow-y: scroll to the element or change height: 40vh; to min-height: 40vh;