弹性布局创建奇怪的空白-但不是边缘-为什么?

我想用flexbox制作一个可滚动的桌子。< BR> 具有静态大小的表必须适合固定大小的视区。
基本上是这样的:

<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{
边框:1倍纯黑;
溢出:自动;
宽度:350px;
}

#内容{
#职位:相对;
溢出:隐藏;
}

.单元格{
显示器:柔性;
弯曲收缩:0;
弹性增长:0;
柔性包装:Nowrap;
溢出:隐藏;
框大小:边框框;
}

.列{
宽度:200px;
高度:100px;
}

行{
显示器:柔性;
弯曲方向:行;
溢出:隐藏;
边框:1倍纯黑;
#overflow-x:滚动;
溢出:可见;
框大小:边框框;
}

.视区{
显示器:柔性;
弯曲方向:立柱;
宽度:300px;
高度:500px;
溢出:滚动;
柔性包装:包装;
#柔性包装:Nowrap;
框大小:边框框;
弹性基础:0;
}
——
--><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>>=




但这给了我奇怪的空白。< BR>
但只有在Chrome和IE11中——在Firefox和Edge中,它才能正常工作。


如果我移除了flex-wrap-on.viewport,我会在edge和firefox中遇到同样的问题。< BR>
另外,我也不希望在.viewport上使用flex wrap。


到目前为止,我还无法找出问题所在。

这种垃圾让我发疯。有人有主意吗?

.

<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中,它才能正常工作。


如果我移除了flex-wrap-on.viewport,我会在edge和firefox中遇到同样的问题。

另外,我也不希望在.viewport上使用flex wrap。


到目前为止,我还不知道问题出在哪里。

这种垃圾让我发疯。有人有主意吗?