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

Question

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?

Levkas

Post all of your HTML and CSS in the question as well so we don't have to jump back and forth between StackOverflow and JSFiddle to help solve your question :) – Armandarmanda

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.

Wingard

Thank you. I did not post the JavaScript but this will be a linegraph where you can drag the points with your mouse on the right place, the lines are connecting the dots together. I now put the lines in a seperate container and it works now in firefox too. – Levkas

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>

Aegina