Safari vh + max-height + justify-content：中心bug？

Question

考虑一下：

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  display: flex;
  flex-direction: column;
  background: teal;
  width: 100%;
  justify-content: center;
}

.child {
  display: flex;
  background: red;
  width: 50%;
  height: 20vh;
  max-height: 20px;
}

Chrome（57），Firefox（52），IE（Edge）渲染如下：

但是，Safari（Mac OS版X第9版）就像这样呈现：

我认为Safari的呈现错误，请告诉我你是否不同意。

如果您删除justify-content: center或max-height: 20px或将height: 20vh更改为height: 20px Safari渲染与其他浏览器一样（我认为是正确的）。

Codepen：https://codepen.io/anon/pen/jmrOjq

这是一个已知的Safari bug吗？我错过了在这里使用flex-box吗？