1 pixel from hell

Front-end
#1

Olá pessoa, tenho esse exemplo de teste:

Meu teste

Ele tem um código muito simples :

    .flex {
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;

  	justify-content: space-between;
  	margin-bottom: 1px;
}

.flex .box {
	background-color: cyan;
	width: calc((100% / 12) - 1px);
}

Dependendo do tamanho da tela esse 1px de margem aparece maior em determinado box. Alguém sabe me dizer se isso é arrumável?

#2

Cara, nao consigo enxergar aqui o problema. Redimensionei bastante aqui mas tudo parece meio certo (mas nao medi os pixels ok).

Mas de modo geral o que me parece é que esse tipo de variacao pode ser problemas de arredondamento mesmo. Essa conta 100%/12 -1px tem muita chance de ser arredondada.

Se o importante pra você são as margens exatas de 1px, ideal talvez seja fixa-las no codigo (como vc fez com o margin-bottom) ao inves de deixar como ta hoje. Desse jeito ta meio assim “faz uma conta doida ai que eu espero que deixe 1px sobrando”. As vezes o arredondamento nao vai dar certo.