Flex-layout 创建奇怪的空白 - 但不是在边缘 - 为什么？

Question

我想用 flexbox 制作一个可滚动的表格。
具有静态尺寸的表格必须适合固定尺寸的视口。
基本上是这样的：

<div class="container" style="width: x; height: y; overflow: scroll">
   <div data-row="1">
       <div data-column="1"></div>
       <div data-column="2"></div>
       <div data-column="3"></div>
   </div>
   <div data-row="2">
       <div data-column="1"></div>
       <div data-column="2"></div>
       <div data-column="3"></div>
   </div>
   <div data-row="3">
       <div data-column="1"></div>
       <div data-column="2"></div>
       <div data-column="3"></div>
   </div>
</div>

这是我目前所拥有的：

#viewport {
  border: 1px solid black;
  overflow: auto;
  width: 350px;
}

#content {
  #position: relative;
  overflow: hidden;
}

.cell {
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.column {
  width: 200px;
  height: 100px;
}

.row {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border: 1px solid black;
  #overflow-x: scroll;
  overflow: visible;
  box-sizing: border-box;
}

.viewport {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 500px;
  overflow: scroll;
  flex-wrap: wrap;
  #flex-wrap: nowrap;
  box-sizing: border-box;
  flex-basis: 0;
}

<div class="viewport"><!--
        --><div class="row"><!--
            --><div class="cell column" style="background-color: red;"></div><!--
            --><div class="cell column" style="background-color: green;"></div><!--
            --><div class="cell column" style="background-color: blue;"></div><!--
            --><div class="cell column" style="background-color: hotpink;"></div><!--
        --></div><!--
        --><div class="row"><!--
            --><div class="cell column" style="background-color: red;"></div><!--
            --><div class="cell column" style="background-color: green;"></div><!--
            --><div class="cell column" style="background-color: blue;"></div><!--
            --><div class="cell column" style="background-color: hotpink;"></div><!--
        --></div><!--
    --></div>

但这给了我奇怪的空白。
但仅在 Chrome 和 IE11 中 - 在 Firefox 和 Edge 中可以正常工作。

如果我删除 .viewport 上的 flex-wrap，我会在 Edge 和 Firefox 中遇到同样的问题。
另外，我真的不希望 .viewport 上的 flex-wrap 。

到目前为止，我一直无法弄清楚问题所在。
这种废话让我发疯。有人有想法吗？

Answer 1

问题在参考CSS Box Model时解释：

^来源：W3C

如您所见，边框适用于 HTML 元素的 边框区域。就这样吧。

边框并非旨在延伸到 HTML 元素的 溢出区域，它位于 边距区域之后。这就是您的边框在滚动时被截断的原因，这会将用户带入溢出区域。

浏览器行为可能会有所不同，因为规范不是法律，而是指南。浏览器开发人员可以随时偏离规范。

有关更多详细信息，请参阅以下关于 background-color 和 overflow 行为的帖子，这实际上与 border 和 overflow 行为相同：Make background color extend into overflow area