Как заставить дочерний div соответствовать ширине и высоте родителя с границами?

Question

Я хочу добавить границу в div, добавив оболочку. Я использую CSS Grid, и проблема заключается в том, что div обернут границы вокруг пикселя. Это делает контейнер выглядит некрасиво, потому что границы на разных сторонах имеют разную ширину. Как сделать так, чтобы дочерний элемент соответствовал родителю, учитывая его границы? Я использую браузер Chromium. Кстати, в Firefox проблем нет.

JSFiddle здесь .

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%, мы увидим это: