CSS - 100％高度的垂直滚动条

Question

我有一个简单的页面 - html，body，.container和img都有100％的高度。 html＆amp;身体有边缘＆amp;填充0px。

我有一个很长的img被挤进窗户（由于高度：100％）。但是右边有一个垂直滚动条。我无法弄清楚原因。

我可以用overflow-y: hidden强行隐藏它，但我想知道它为什么存在。 （显示在Chrome，Safari和Firefox中，因此它不是浏览器错误。）

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  border: 0px;
}
.container {
  height: 100%;
}

img {
  height: 100%;
}

<div class="container">
  <img src="https://i2.wp.com/emilcarlsen.org/wp-content/uploads/sites/13/2014/12/20141120_130615.jpg" alt="">
</div>