20

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 the three divs not go out to the edge of parent div. Is there a way to have flexbox ignore the :before and :after?

codepen.io

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

.container div {
    background: red;
    height: 245px;
    width: 300px;
  }
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Parzi
  • 694
  • 2
  • 10
  • 33
  • 1
    Why would you want to apply a clearfix on a flexbox container in the first place? – connexo Nov 18 '16 at 23:02
  • 1
    All containers have the same before and after pseudo-elements regardless of whether we have flexbox on it or not. – Parzi Nov 18 '16 at 23:05
  • Well then that's the nonsense you should stop ... – CBroe Nov 18 '16 at 23:15
  • @CBroe, those pseudo-elements come standard in Bootstrap. Maybe that's the source. http://stackoverflow.com/q/35719124/3597276 – Michael Benjamin Nov 18 '16 at 23:20
  • 4
    This, amongst a thousand others, is the reason I reallly dislike CSS frameworks. – connexo Nov 19 '16 at 06:50
  • 1
    @Michael_B I know they come standard with Bootstrap; but no one is forcing anybody to _use_ the default bootstrap classes, or not overwrite stuff that doesn't make sense in the actual situation. And a clearfix in flexbox doesn't make any, but only causes additional problems. – CBroe Nov 19 '16 at 10:07

4 Answers4

26

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:

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
8

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>
vals
  • 61,425
  • 11
  • 89
  • 138
3

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

Parzi
  • 694
  • 2
  • 10
  • 33
0

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;
  }
}
anderskleve
  • 1