为什么存在“ box-sizing：border-box;”时，网格div的实际高度不包含“ grid-row-gap”？

Question

问题：

内部网格div不能被外部div完美包裹。

内部网格div的高度 = 外部div的高度 + 网格行间隙 * （行号网格div的-1）

代码：

<div class="outer">
  <div class="inner"></div>
</div>
<div>map</div>

.outer{
  border: 1px solid #ddd;
  width: 100%;
  .inner{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 50%));
    grid-gap: 5%;
    box-sizing: border-box;
    padding: 0 5%;
  }
}

结果： https://i.loli.net/2019/03/15/5c8b470ce15a9.png