HTML - Me aparece una especie de margen fantasma usando cajas flex

Si os fijáis en azul4 hay un pequeño margen que yo no he determinado y que chrome no señala si inspecciono, pero ahí está. No es algo demasiado molesto pero me gustaría saber por qué ocurre y cómo arreglarlo, ya he probado con la propiedad "align-items" y nada.

• PruebaExamen.html.zip(693,0 B)

Hola David, he probado tu código en Chrome ver. 55 y no tengo el problema que tu tienes... es decir, esa separación que hay entre el azul3 y el azul4 de esa linea fina, yo no la tengo, me queda completamente pegado después del margin-bottom

Pues ni idea de lo que pasa, yo lo acabo de probar y sigo teniendo ese pequeño espacio y también uso Chrome versión 55. No sé si podría llegar a ser relevante, pero uso Mac.

tienes la posibilidad de probarlo en un PC? para ver si realmente es algo que pasa en el Mac?