I ran into the same issue while expanding a burger menu on iOS. Tried using 100svh/dvh/lvh and even env(safe-area-inset-bottom), but nothing worked.

What finally helped was handling the body styles differently:

• On iOS, set document.body.style.position = 'fixed'.

• On other browsers, set document.body.style.overflow = 'hidden'.

This prevents the bottom widget from expanding unexpectedly and makes the element properly use the available viewport.