env(safe-area-inset-bottom) not working in css

I can't get env() to work.

* {
  padding: 0;
  margin: 0;
}

.testclass {
  background-color: green;
  padding-bottom: env(safe-area-inset-bottom);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="testclass">Hello there</div>
  </body>
</html>

This is what it looks like:

Adding the padding with padding-bottom: 50px works as expected:

What am I doing wrong here?

EDIT: I figured it mostly out (see answer), but it's still not working when adding the website to the home screen. Maybe that has something to do with Webpack.

Solution

It appears for env(safe-area-inset-bottom) to work, the body itself has to scroll (so no height: 100% or overflow: scroll in any parent.

Also: hiding the bottom bar by using the "hide toolbar" option doesn't work. Instead, it has to disappear through scrolling.

* {
  padding: 0;
  margin: 0;
}

.testclass {
  margin-top: 100px;
  background-color: green;
  padding-bottom: env(safe-area-inset-bottom);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="testclass">Hello there</div>
    </div>
    <div style="height: 120vh"></div>
  </body>
</html>