Firefox 34+ ignoring max-width for flexbox [duplicate]

Answer 1

Edit—the original answer was not fully correct

The important aspects here are

1. The "flex item" div.imageContainer needs a positive flex-shrink value
2. The (display:inline) img child of the flex item needs its own constraint to ensure it doesn't overflow the flex item
3. In accordance with the W3C flexbox spec^*, the flex item needs some kind of definite size constraint, which we can satisfy by delcaring min-width:1px or max-width:100% on .imageContainer; otherwise, in accordance with the spec, the .imageContainer must take its content's size, i.e. the full 1000px intrinsic size of the PNG image

OP's question already satisfied point 2, but not points 1 and 3. Here is the CSS which I used:

.mediaContainer
{
    overflow: visible;
    width:100%;
}

.mediaCenterContainer
{
    display: flex;
}

.imageContainer
{
    flex-shrink:1;
    min-width:1px;
}
.imageContainer img {
    max-width:100%;
}

… and here's a fiddle demonstrating it.

Many thanks to @dma_k for pointing out the error in my original answer.

^{*I usually hate linking to W3C specs, but this section is actually quite readable; I'd encourage people to read it.}

---

Original answer

Firefox 36 (currently dev preview) gives the behaviour you expect if you constrain the div rather than the img. You can do this using flex-shrink:

.imageContainer {
  flex-shrink:1;
}

… or the short-hand flex property:

.imageContainer {
  flex: 0 1 auto;
}

… or using the max-width declaration you had placed on the img, but also on the div:

.imageContainer, .imageContainer img {
  max-width:100%;
}

So Firefox allows flex elements to overflow their containers. I don't know the flexbox spec that well, but it seems natural that this would be the case; that's why the flex-shrink property exists.