iPad Chrome has wrong height

iPad Pro(11-inch), iPadOS version: 16.6.1, Chrome version: 116.0.5845.177 I create a simple html and try to run on iPad. Although I set the height to 100vh, there is a vertical scrollbar on the right, and I could scroll down to a total empty page. It seems like the total height is more than 200vh. The web page works on Safari, but not work in iPad chrome.

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div style="background-color: green; height: 100%; width:100%;">This is a div</div>
</body>
</html>

css:

body {
  height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: 100vh;
  height: -webkit-fill-available;
}