Flexbox项目百分比高度在Safari中不起作用

Question

Safari中的弹性项目高度存在问题。

＆＃13;

＆＃13;

.column-wrapper {
  width: 1200px;
  display: flex;
}

.column-1 {
  min-height: 400px;
  background: red;
  display: flex;
  width: 50%;
}

.column-2 {
  background: blue;
  display: flex;
  width: 50%;
}

.inner-column {
  background: yellow;
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
}

.inner-column-2 {
  background: blue;
  width: 50%;
}

.box {
  background: gray;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px
}

.box-2 {
  background: green;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-3 {
  background: cyan;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="column-wrapper">
  <div class="column column-1">
    <a href="#"></a>
  </div>
  <div class="column column-2">
    <div class="inner-column">
      <div class="box">BOX 1</div>
      <div class="box-2">BOX 2</div>
    </div>
    <div class="inner-column inner-column-2">
      <div class="box-3">BOX 3</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

请检查此笔： - ＆gt; https://codepen.io/anon/pen/KmXXxY

在Chrome和Firefox上 - box1，box2，box3获得正确的高度。但不是在Safari（10.1（12603.1.30.0.34））中。这是为什么 ？