Flexbox items percentage height not working in Safari

Question

I have a problem with flex items height in Safari.

.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;
}

<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>

Please check this pen: -> https://codepen.io/anon/pen/KmXXxY

On Chrome and Firefox - box1, box2, box3 gets correct height. But not in Safari (10.1 (12603.1.30.0.34)). Why is that ?