Flexbox style "justify-content: space-between" misaligned in Firefox with absolutely positioned child

Question

Have an issue with Flexbox and space-between in Firefox 36. For reasons unknown space-between is not correct in Firefox (causing the strange margin on left) but perfect in Google Chrome.

Chrome screen capture

Firefox screen capture

CSS

  .form-status {
  display: flex;
  justify-content: space-between; 
  position: relative;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: $gray;
  }

  .step {
    position: relative;
    text-align: center;
    padding-top: 15px;
    color: $gray-light;

    &:after {
      content: "";
      position: absolute;
      height: 8px;
      width: 8px;
      border-radius: 50%;
      top: -11px;
      left: 50%;
      margin-left: -11px;
      background: $gray;
      border: 8px solid #0c0616;
      box-sizing: content-box;
    }

    &:first-child, &:last-child {
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: -100vw;
        right: 0;
        height: 1px;
        background: black;
      }
    }
    &:first-child:before { right: 50%; }
    &:last-child:before { left: 50%; }

    &.active {
      color: white;
      &:after { background: $brand-yellow; }
    }
  }

}

HTML

    <div class="page-section page-section-dark page-section-narrow">
    <div class="container">
        <div class="form-status">
            <div class="step {{#ifeq step "one"}}active{{/ifeq}}">
                Basic Information
            </div>
            <div class="step {{#ifeq step "two"}}active{{/ifeq}}">
                Agreement
            </div>
            <div class="step {{#ifeq step "three"}}active{{/ifeq}}">
                Payment
            </div>
        </div>
    </div>
</div>  

Answer 1

The issue is from this styling on your final page:

.form-status:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:#555
}

(which I think comes from the "&:before" in your original question).

.form-status is a flex container, and this is giving it an absolutely-positioned child -- and absolute positioning for children of flex containers doesn't quite work interoperably yet -- apparently IE (or their next-gen "Spartan") is the only browser to implement the latest spec-text on that right now.

This styling breaks your layout because the absolutely positioned child drops an invisible 0-sized "placeholder", which forms a 0-sized flex item, and that flex item affects the positioning of all the other flex items via participating in the space-around alignment. (This was required by an earlier version of the flexbox spec, but it's changed to no longer call for these placeholders to form flex items.)

I'm intending to bring Firefox up-to-date* on this aspect of flexbox soon (here's the bug on that), but in the meantime, I'd suggest avoiding using absolute positioning on any direct child of a flexbox, since it works differently in every browser right now.

*(UPDATE: This is now fixed in Firefox trunk builds. The fix will tentatively be in Firefox 52, which I believe ships in March 2017.)