如何使子div带有边框的父项的宽度和高度合适？

Question

我想通过添加包装器为div添加边框。我正在使用CSS Grid，问题是包裹的div将边框覆盖了大约一个像素。由于不同边的边框具有不同的宽度，因此使容器看起来很难看。考虑到边界，如何使子div适合父母？我使用Chromium浏览器。 顺便说一句，Firefox没有问题。

JSFiddle是here。

HTML：

 <div class="box">
    <div class="slide-wrapper">
      <div class="slide"></div>
    </div>
 </div>

CSS：

.box {
  display: grid;
  padding: 8px;
  grid-row-gap: 8px;
}

.slide-wrapper {
  border: 2px solid darkgray;
}

.slide {
  background-color: white;
  width: 100%;
  height: 100%;
}

如果我将宽度更改为99％，我们可以看到以下内容：