Flexbox justify-content: center not working properly in Safari

Viewed 4665

I'm having trouble getting flexbox and justify-content: center to play nicely in Safari.

HTML:

<div class="flex-row">
  <div class="label"> Label </div>
  <div class="well"></div>
</div>

CSS:

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.well {
  width: 230px;
  height: 200px;
  background-color: grey;
}

.label {
  z-index: 2;
  position: absolute;
  margin-top: -8px;
}

In Chrome and FF this gives a simple grey well, with a label centered above it. In Safari however the label does not center. Open the CodePen example below in Safari to see the uncentered label:

https://codepen.io/jklevin/pen/weLvxx

My hunch is that this is due to an implementation bug in Safari, but curious if anyone knows of an existing workaround.

1 Answers
Related