Fixed Elements on Mobile

Question

When viewing the following code on my mobile, the div does not behave fixed as intended - it remains in its position instead of adjusting to the screen when scrolling:
https://code.sololearn.com/WmfwIsLd9Pug/?ref=app

However, it works if the content size surpasses the screen size only by width or only by height, and in the web version it is fine in any case anyway.
So, this got me curious how/why this behaviour is caused (only if width and height surpass screen size), and if there are possibly any workarounds I could use for a code I am currently working on.

I even dug up this question from a few months ago that has a similar problem, but it does not really satisfy me:
https://www.sololearn.com/discuss/1499536/?ref=app

Answer 1

Adding to the head:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

Fixed it for me

Source:
https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/
Demo:
https://code.sololearn.com/W2MhC51ns69E/?ref=app

Answer 2

Thank you, Burey!
I played around with the sample you provided a bit and it appears to me that defining a minimum scale above 1.0 and therefore preventing zooming out is enough to have it work, while specifying a maximum scale does not work.
In that case, user-scalability could be allowed without messing up the fixed element.
Not sure why it behaves this way, but anyway, I can include that in my project to fix my problem, so this was very helpful.