嵌套的flexbox在Safari桌面中无法正常工作

Question

这是我所期望的（在Chrome和Firefox中测试）：

这就是它在Safari Version 9.0.2（11601.3.9）中的外观。

快速向您展示一个例子：

https://jsfiddle.net/qbozL26m/1/

CSS：

.container {
  padding-top: 20px;
}

.equal-height {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.equal-height > [class^="col-"],
.equal-height > [class*=" col-"] {
  display: flex;
  //align-items: center;
  //
  .well {
    width: 100%;
  }
}

修改：

Gif och Chrome-behavior（正确）

Safari行为的Gif（不正确）

编辑2：

我已经想出了一个解决方案来解决它的问题，但它并不是那么好，因为它会覆盖bootstraps列的大小。

.equal-height > [class^="col-"],
.equal-height > [class*=" col-"] {
    display: flex;
    flex-basis: 33%;
}