Why 100vh makes a div taller than the visible area in Safari for iOS?

I'm designing a web page for mobile. This page has an overlay div with height: 100vw;.

On iOS it occupies a height that goes beyond the toolbars at 628px (see screenshot below), on the console however window.innerHeight returns a smaller value of 553px.


Also, how do I make it the size of the visible area through CSS?

enter image description here