100vh height when address bar is shown - Chrome Mobile

I came across this problem a few times and was wondering if there was a solution to this problem. My problem occurs on the Chrome mobile app. There, you can scroll down a bit and the address bar disappears. So far, so good, let's make an example:
The container's height is set to 100vh.

As you can see, the bottom part gets cut off.

When I scroll down, it looks like this:

Now it looks good. So obviously Chrome calculates the address bar's height into the viewport height. So my question is:

Is there a way, that it looks the same with or without the address bar? So that the container expands or something?

There are now three new viewport units:

• svh svw - Smallest possible viewport (i.e. doesn't include address bar)
• lvh lvw - Largest possible viewport (i.e. includes address bar)
• dvh dvw - Dynamic viewport (i.e. changes depending on whether address bar is visible)

Usage

If you want the container's height to change depending on whether the address bar is visible, dvh fits your needs perfectly.

.container {
    height: 100dvh;
}

Hope this helped!

Further reading

• web.dev
• Mozilla reference
• "Can I Use" support for viewport unit variants
• Usama Munawar's answer