Flexbox在具有子元素的多个列上具有相同的高度

Question

我在列中有多个项目。我需要它们在列上的高度相等。此外，我确实需要断点，因此需要将.items排列为列。我准备了一个片段，但 codepen 更好，因为它是用scss编写的：

没有JavaScript可以吗？

场合： 灰色和红色div动态填充内容。由于这需要响应，因此需要基于列（1,2,3,4）。但我也需要平等的高度。我想要的是：

1. 绿箱（.item）高度相同✓
2. 响应（每行XS屏幕1盒，sm屏幕2盒，大屏幕4盒）✓
3. 灰色物品等高
4. 红色物品等高

// see http://codepen.io/anon/pen/xOvBXa for uncompiled scss

html {
  box-sizing: border-box;
}

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

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.item {
  background: green;
  padding: 5px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media (min-width: 544px) {
  .item {
    width: 50%;
  }
}
@media (min-width: 768px) {
  .item {
    width: 25%;
  }
}

.top,
.bottom {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  border: 2px blue solid;
}

.top {
  background: #333;
}

.bottom {
  background: red;
}

<!--  
http://codepen.io/anon/pen/xOvBXa
Situation:
The gray and red divs are dynamically filled with content. Since this is required to be responsive it needs to be column based (1,2,3,4).  But also i do need equal heights.What I want is:

1. Green Box (.item) same height ✓
2. Responsive (1 Box on XS screens per row, 2 boxes on sm screens and 4 boxes on large screens)  ✓
3. Gray items equal height 
4. Red items equal height

-->
<div class="row">
  <div class="item">
    <div class="number">1</div>
    <div class="top"><br /><br /><br /></div>
    <div class="bottom"><br /></div>
  </div>
  <div class="item">
    <div class="number">2</div>
    <div class="top"><br /><br /><br /><br /></div>
    <div class="bottom"><br /></div>
  </div>
  <div class="item">
    <div class="number">3</div>
    <div class="top"><br /><br /><br /><br /><br /><br /></div>
    <div class="bottom"><br /><br /></div>
  </div>
  <div class="item">
    <div class="number">4</div>
    <div class="top"><br /><br /><br /><br /></div>
    <div class="bottom"><br /><br /><br /></div>
  </div>
</div>