why does border fix height issue

Question

I have this setup:

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

So the .inner creates negative margin to enlarge the <svg> within for 20px on width and height. So in case the viewport is wide enough, lets say 1000px, I expect the .wrap to be 900 x 600 px in size and the svg to be 920 x 620 px.

But .wrap appears to be 900 x 620 px, so too high. Adding border: 1px #00ff00 solid; to the .wrap element fixes that. Why?