Button with display: flex does not work in Safari. Causing size and alignment issues

I'm having some problem with display: flex in both Safari and iOS Safari. Safari has alignment issues and iOS Safari has both alignment and size issues. Is this expected or a valid bug in Safari?

Edit: Also, height in percentage on the child SVG inside the Button does not work either. This works in all other browsers. I mane another more advanced example with SVG elements, and I added an anchor to compare to the button. More advanced example here

My simple example

HTML:
<div class="flex">
  <div class="col col-1">
    <button class="sub-col">
      <span class="span"></span>
    </button>
    <div class="sub-col">2</div>
    <div class="sub-col">3</div>
  </div>
  <div class="col col-2"></div>
  <div class="col col-3"></div>
</div>


CSS:
.flex {
  display: flex;
  flex-direction: column;
  height: 80vh;
  background: #666666;
  position: fixed;
  width: 100%;
}

.col {
  display: inherit;
  flex: 1 1 auto;
  background: #ccffcc;
}
.col-1 {
  flex: 0 0 10vh;
  background: #ffcccc;
}
.col-3 {
  flex: 0 0 10vh;
  background: #ccccff;
}

.sub-col {
  display: inherit;
  flex: 0 0 25%;
  justify-content: center;
  align-items: center;
}

.span {
  width: 10px;
  height: 10px;
  background: #ffaaaa;
}

Screenshots:

This is what it should look like, and does in Chrome, FF and Edge (Haven't tested IE)

This is what it looks like in Safari

And this is iOS Safari