Pseudo Elements Breaking Justify-content: Space-between In Flexbox Layout

I have three divs inside a parent div that are being spaced out using: display: flex; justify-content: space-between; However, the parent div has an :after on it which is making t

Solution 1:

Short Answer

In CSS, there is currently no 100% reliable way to prevent pseudo-elements from impacting the justify-content: space-between calculation.

Explanation

::before and ::after pseudo elements on a flex container become flex items.

From the spec:

4. Flex Items

Each in-flow child of a flex container becomes a flex item.

In other words, each child of a flex container that is in the normal flow (i.e., not absolutely positioned), is considered a flex item.

Most, if not all, browsers interpret this to include pseudo-elements. The ::before pseudo is the first flex item. The ::after item is the last.

Here is further confirmation of this rendering behavior from Firefox documentation:

In-flow ::after and ::before pseudo-elements are now flex items (bug 867454).

One possible solution to your problem is to remove the pseudo-elements from the normal flow with absolute positioning. However, this method may not work in all browsers:

• Absolutely positioned flex item is not removed from normal flow in Firefox & IE11

See my answer here for illustrations of pseudo elements messing up justify-content:

• justify-content: space-between failing to align elements as expected

Solution 2:

If this an inherited property, just override it

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;
}

.container div {
    background: red;
    height: 245px;
    width: 100px;
}

/* definitions from a framework */
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }

/* definitions override */
.container.flexcontainer:before, 
.container.flexcontainer:after {
   display: none;  
}

<div class="container flexcontainer">
  <div></div>
  <div></div>
  <div></div>
</div>

Solution 3:

Nested another div inside the parent div and gave that all the flex code so the pseudo-elements aren't affecting it.

Solution 4:

If you have to do this, you could take advantage of the auto margin behaviour on flex items. You would also need to zero the left margin on the first flex child and equally the right margin on the last flex child. See the codepen below.

Flexbox & auto margins: https://www.w3.org/TR/css-flexbox-1/#auto-margins

Codepen demo: http://codepen.io/anderskleve/pen/EWvxqm

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;

  div {
    background: red;
    height: 245px;
    width: 300px;
    margin: 0 auto;
  }

  div:first-child {
    margin-left: 0;
  }

  div:last-child {
    margin-right: 0;
  }

  &:before {
    content:'';
    display: table;
  }

  &:after {
    clear: both;
    content: '';
    display: table;
  }
}