Centering button with flex box (Safari)

by jimousse

HTML

<div class="blabla">
    <button>
        <span class="bla">
            <span class="blu">Test</span>
        </span>
    </button>
</div>

CSS

div {
    height: 200px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    width: 100%;
}

span.bla {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    justify-content: center;
    background: pink;
    height: 100%;
}

span.blu {
  background: yellow;
  width: 100%;
}

button {
  flex-grow: 1;
  height: 100%;
}