Why scroll snapping doesn't work as expected?

Question

(vpH - viewport height, fg - foreground, bg - background , elems - elements)

I have a code which contains 3 txt elems in the fg and 3 img elems in the bg. The txt elems scroll vertically and accordingly, the img elems scroll horizontally ( done with JS ). I want to snap to the next (txt) elem while scrolling and it is working.
It works fine when the container ('#content-wrapper') of txt elems has a height less than the vpH (till h = 99.9vh..!).
But when I tried to span it over the entire viewport, I.e. it's height is now vpH, it doesn't snap anymore.
Why is it so?

https://code.sololearn.com/WbI0B6NXnh1J/?ref=app

Answer 1

Pikachu Girl
It is working fine when #content-wrapper height is less than 100vh.
But when I set it to 100vh, it won't snap anymore.
I wanted to know why it is so.