Firefox not scaling img with max-width

I find that img descendants of flexbox positioned items with max-width: 100% rule doesn't work on firefox. I've tryed the solutions from: Firefox 34+ ignoring max-width for flexbox and, Firefox flexbox image width

As the code is quite long I wrote a pen: http://codepen.io/vandervals/pen/raXBNj As you can see in this pen, this is a problem for small sized screens. I found a not very elegant solution:

img{
  max-width: 500px;
  width: 100%;
}

The problem with this approach is that we lose the global use of the rule max-width: 100% for every image, no matter the actual dimensions of the image. Has anyone solved this problem?