Css 为什么边界固定高度问题

我有以下设置：

//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;
}

//html
…
//css
.包裹{
最大宽度：900px；
宽度：100%；
保证金：0px自动；
/* 
*下面的示例解决了这个问题
*为什么?？
*
*/
边框：1px#00ff00实心；
}
.内部{
保证金：-10px-10px；
}
svg{
显示：块；
}

因此，

.inner

创建负边距，以将

内的宽度和高度放大20px。因此，如果视口足够宽，比如说1000px，我希望

.wrap

的大小为900 x 600 px，svg的大小为920 x 620 px

但是

.wrap

似乎是900 x 620 px，太高了。添加

边框：1px#00ff00实心到
。wrap
元素修复了该问题。为什么?