Почему реальная высота сетки div исключает `grid-row-gap`, когда` box-sizing: border-box; `существует?

Question

задача:

Внутренний элемент сетки не может быть идеально обернут внешним элементом.

Высота внутреннего элемента сетки = высотавнешнего 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