css - 为什么子 div *有时* 不能完美地填充父 div？

Question

在下面的代码中，我宁愿永远不要看到任何红色背景。但有时，在某些浏览器中，在某些缩放级别下，红色背景会在底部显示内部“边框”，在某些变体中，会显示父 div 的两侧。

我开始的实际情况当然更复杂，但这个简单的例子说明了这个问题。

我已经摆弄了 CSS flex 和 grid，以及许多听起来像是可以解决这个问题的各种设置，但我还没有找到任何可靠的解决方案。

我可以在 Mac 和 Windows 上的 Chrome 以及 Windows 的 Edge 上重现。但我根本无法在 Mac 上的 Safari 上重现。我还没试过火狐。请记住尝试许多缩放级别。该问题在所有缩放级别都无法重现。

.outer {
  background-color: red;
  border: solid 1px black;
  display: grid;
  grid-auto-flow: column;
}

.inner {
  background-color: grey;
}

<div class="outer">
  <div class="inner">seeing</div>
  <div class="inner">red</div>
</div>

在 CodePen 上查看

标签： css