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

Question

This question already has answers here:
Absolutely positioned flex item is not removed from the normal flow in IE11
(4 answers)
Closed 6 years ago.
This http://jsfiddle.net/7ra5oL77/ should line up the orange dots horizontally with the text underneath.
The relevant items are:
<div class="draggable ui-widget-content"></div>
and
<div class="item">60°C</div>
This works in Chrome and Edge, but Firefox seem to not use the full width and there is a too big white space on the right side.
Can anyone help me?

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>