Flexbox in Firefox: Items are not lined up properly [duplicate]

Answer 1

The issue that I see is that firefox is recognizing your div.lines as items within the flexbox even though the are position absolute. If you pull them outside of the container or delete them altogether (I don't see their purpose), then you should be fine.

Answer 2

The absolute positioned .lines mess up with the space-around alignment:

#graph-containment-wrapper {
  justify-content: space-around;
}

This seems a bug, because the spec says

An absolutely-positioned child of a flex container does not participate in flex layout.

The justify-content property aligns flex items along the main axis of the current line of the flex container.

As a workaround, you can use auto margins to achieve the same effect without the interference of absolutely positioned elements:

.draggable {
  margin: 0 auto;
}

.lines {
  padding: 0px;
  margin: 0px;
  height: 1px;
  background-color: orange;
  position: absolute;
}
.draggable {
  width: 30px;
  height: 30px;
  background: orange;
  border-radius: 30px;
  cursor: n-resize;
  top: 200px;
  z-index: 1;
  border: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  margin: 0 auto;
}
.x-axis {
  display: flex;
  justify-content: space-around;
  width: 100%
}
#graph-containment-wrapper {
  display: flex;
  height: 20rem;
  background-color: white;
}
.graph {
  -webkit-user-select: none;
}
.draw-area{
  width: 100%
}
.hlines{
  background-color: lightgray;
  width:100%;
  height: 1px;
  display: flex;
}
.hlines-container{
  display:flex;
  min-height: 100%;
  justify-content: space-between;
  flex-direction: column;
  padding: 15px;
  height: 20rem;
  margin-top: -20rem
}

<div class="graph">
  <div class="draw-area">
    <div id="graph-containment-wrapper">
      <div class="draggable ui-widget-content"></div>
      <div class="draggable ui-widget-content"> </div>
      <div class="draggable ui-widget-content"> </div>
      <div class="draggable ui-widget-content"> </div>
      <div class="draggable ui-widget-content"> </div>
      <div class="lines" id="myline0"></div>
      <div class="lines" id="myline1"></div>
      <div class="lines" id="myline2"></div>
      <div class="lines" id="myline3"></div>
    </div>
    <div class="hlines-container">
      <div class="hlines"></div>
      <div class="hlines"></div>
      <div class="hlines"></div>
      <div class="hlines"></div>
      <div class="hlines"></div>
      <div class="hlines"></div>
    </div>
  </div>
  <div class="x-axis">
    <div class="item">20°C</div>
    <div class="item">30°C</div>
    <div class="item">40°C</div>
    <div class="item">50°C</div>
    <div class="item">60°C</div>
  </div>
</div>