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

Question

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

Answer 1

You can't set display flex to button and fieldset elements. chk below link. Wrap your element with div or span tags

https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers

Answer 2

The button element, and a couple other elements for that matter, cannot be flex containers in some browsers. Safari is one of them.

You can try a simple solution though, if you like. The idea is, you wrap your .span inside .span-wrapper. Then you let .span-wrapper be your flex container.

Like that:

HTML:

<div class="flex">
  <div class="col col-1">
    <button class="sub-col">
      <span class="span-wrapper">
        <span class="span"></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;
}

.span-wrapper {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
  align-items: center;
}