#StackBounty: #css #flexbox #css-calc #space-between Flexbox space-between has extra 1px gap at the end when using calc()

Bounty: 50

I was developing a grid system using flexbox’s justify-content: space-between; and I noticed that on certain screen sizes (about every other pixel) a 1 pixel gap appears at the end of certain columns.

If you start to resize your browser with the example below, you can see the 1 pixel space appearing and disappearing.

Example

<

div class=”snippet” data-lang=”js” data-hide=”false” data-console=”true” data-babel=”false”>

* {
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
  border: 2px solid #888;
  justify-content: space-between;
}

div[class^="col"] {
  border: 2px solid red;
}

.col-12 {
  flex-basis: calc(100% - 4px);
}

.col-11 {
  flex-basis: calc(11/12*100% - (1.167 - 11/12)*24px);
}

.col-10 {
  flex-basis: calc(5/6*100% - (1.167 - 5/6)*24px);
}

.col-9 {
  flex-basis: calc(3/4*100% - (1.167 - 3/4)*24px);
}

.col-8 {
  flex-basis: calc(2/3*100% - (1.167 - 2/3)*24px);
}

.col-7 {
  flex-basis: calc(7/12*100% - (1.167 - 7/12)*24px);
}

.col-6 {
  flex-basis: calc(1/2*100% - (1.167 - 1/2)*24px);
}

.col-5 {
  flex-basis: calc(5/12*100% - (1.167 - 5/12)*24px);
}

.col-4 {
  flex-basis: calc(1/3*100% - (1.167 - 1/3)*24px);
}

.col-3 {
  flex-basis: calc(1/4*100% - (1.167 - 1/4)*24px);
}

.col-2 {
  flex-basis: calc(1/6*100% - (1.167 - 1/6)*24px);
}

.col-1 {
  flex-basis: calc(1/12*100% - (1.167 - 1/12)*24px);
}
col-12
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-6
col-3
col-3
col-3
col-3
col-4
col-8
col-7
col-5
col-6
col-4
col-2
</div>

Here is a working Fiddle so you can resize it more easily.

JSFiddle

*Note:
I know that I’m doing some crazy stuff with the calc(), but even if you just subtract 5px instead of (1.167 - 1/12)*24px) the issue still exists.

Is this a bug with flexbox?

What do I need to do in order to remove the gap at the end of these columns?


Get this bounty!!!