显示元素div框的flex可以水平继续

Question

我有这种具有flex属性的垂直DIV结构（两个或多个“ Row” -subtab-），而在其他flex DIV内部则类似于cols（5个元素或更多/更少-box-），每5个元素具有不同的颜色

我遇到问题：当最大宽度：1000px时，我想每行显示三个框（cols），宽度为33.33％，表格的其余所有部分都将是灵活的-边框不会折叠，一个边框和垂直对齐方式类似于看起来像这样：https://i.stack.imgur.com/bohNS.png

CSS

.tab {
  display: flex;
  flex-flow: column wrap;
}

.subtab {
  display: inline-flex;
}

.box {
  flex: 1 0;
}


<div class="tab">
<div class="subtab bgred">
<div class="box" width="20%">
</div>
...
<div class="box" width="20%">
</div>
</div>
</div>
<div class="subtab bgrgreen">
<div class="box" width="20%">
</div>
...
<div class="box" width="20%">
</div>
</div>
</div>