flex div在Chrome中不会成长为父高

Question

我最近在使用flex搞乱CSS。我的目标是创建一个布局，其中有几列具有相同的高度，并且内容之间的间隔相等。我找到了一个适用于Firefox但不适用于Chrome的解决方案（具有错误行为的最小示例）：

HTML：

<div class="row">
  <div class="col-sm-6">
    <div>
      <div class="item">
        Content
      </div>
      <div class="item">
        Content
      </div>
      <div class="item">
        Content
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div>
      <div class="item">
        Content
      </div>
      <div class="item">
        Content
      </div>
      <div class="item">
        Content
      </div>
      <div class="item">
        Content
      </div>
    </div>
  </div>
</div>

SCSS（获得autoprefixed）：

.row {
  display: flex;
  flex-flow: row wrap;

  .col-sm-6 > div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    height: 100%;

    .item {
      height: 20px;
      text-align: center;
      background-color: red;
      margin: 2px;
    }
  }
}

请参阅此jsfiddle：https://jsfiddle.net/zn463f1j/

以下是两个浏览器如何呈现同一个小提琴的图像：

Firefox（应该如何）：

铬：

所以我的问题是我需要添加，删除或更改哪些样式才能使它在两种浏览器中都能正常工作。

我尝试了以下CSS，但这导致firefox也像Chrome一样呈现。将height从100%更改为auto会使代码再次在Firefox中运行，但仍然不在Chrome中。

.row .col-sm-6 {
  height: 100%;
}

Answer 1

这是答案。检查下面的代码和结果。

结果：

.row {
  display: flex;
}
.row .col-sm-6 {
  display: flex;
  flex-direction: column;
}
.row .col-sm-6 > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}
.row .col-sm-6 > div .item {
  height: 20px;
  text-align: center;
  background-color: red;
  margin: 2px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-sm-6">
    <div>
      <div class="item">
        Content
      </div>
      <div class="item">
        Content
      </div>
      <div class="item">
        Content
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div>
      <div class="item">
        Content
      </div>
      <div class="item">
        Content
      </div>
      <div class="item">
        Content
      </div>
      <div class="item">
        Content
      </div>
    </div>
  </div>
</div>