Субпиксельная визуализация делает внутренний div меньше родительского

Question

Я пытаюсь создать макет, который использует сетку внутри другой сетки.Однако, когда мы используем процентные значения для размеров, браузер иногда создает ширину, содержащую десятичные значения.

Такое поведение нарушает мой макет, делая «правильную» сетку на 1 пиксель шире, чем «верхнюю» дочернюю сетку, вызываязеленая рамка справа.

html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

.container {
  background: #fff;
  border-radius: 6px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
  margin: 2rem auto;
  padding: 1rem;
  width: 960px;
}

.main-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: minmax(180px, 25%) minmax(0, 1fr);
  grid-column-gap: 11px;
  margin-bottom: 2em;
}

.left {
  position: relative;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.right {
  background: green;
  display: grid;
  grid-template-rows: minmax(30px, 10%) 1fr;
  overflow-y: hidden;
  overflow-x: scroll;
  border: 1px solid #ECECEC;
}

.top {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 100px;
 
}

.top-block {
  background: tomato;
}

<div class="container">
  <div class="main-grid">
    <div class="left">
      <img src="https://cdnbr2.img.sputniknews.com/images/1395/55/13955519.jpg">
    </div>
    <div class="right">
      <div class="top">
        <div class="top-block">1</div>
        <div class="top-block">2</div>
        <div class="top-block">3</div>
        <div class="top-block">4</div>
        <div class="top-block">5</div>
        <div class="top-block">6</div>
        <div class="top-block">7</div>
        <div class="top-block">8</div>
        <div class="top-block">9</div>
        <div class="top-block">10</div>
        <div class="top-block">11</div>
        <div class="top-block">12</div>
        <div class="top-block">13</div>
        <div class="top-block">14</div>
        <div class="top-block">15</div>
        <div class="top-block">16</div>
        <div class="top-block">17</div>
        <div class="top-block">18</div>
        <div class="top-block">19</div>
        <div class="top-block">20</div>
        <div class="top-block">21</div>
        <div class="top-block">22</div>
        <div class="top-block">23</div>
        <div class="top-block">24</div>
        <div class="top-block">25</div>
      </div>
    </div>
  </div>
</div>

Источник: https://jsfiddle.net/09xs51an/2/

Иногда этого не происходит, в зависимости от ширины области.Если вы хотите поиграть, установите прокрутку вправо и измените ширину области просмотра на JSFiddle.

Решения, которые я пытался использовать, связываются со свойством justify-content, но это нарушаетпрокрутка.

Что я могу сделать, чтобы избежать этого?