为什么边界固定高度问题

Question

我有此设置：

//html
<div class="wrap">
  <div class="inner">
    <svg viewBox="-10 -10 920 620">…</svg>
  </div>
</div>


//css
.wrap {
  max-width: 900px;
  width: 100%;
  margin: 0px auto;
  /* 
   * the below fixes the issue
   * why?
   *
   */
  border: 1px #00ff00 solid;

}

.inner {
  margin: -10px -10px;  
}

svg {
  display: block;
}

因此.inner产生负边距，以将<svg>的宽度和高度扩大20像素。因此，如果视口足够宽（比如说1000像素），我希望.wrap的尺寸为900 x 600像素，而svg的像素为920 x 620像素。

但是.wrap似乎是900 x 620像素，太高了。将border: 1px #00ff00 solid;添加到.wrap元素可以解决此问题。为什么？