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

Question

I have discovered what I believe to be a bug in Firefox versions 34 and above with regards to the behavior of display: flex.

I can confirm the code has always worked in all modern browsers, and still does, but Firefox 34 and the recent Firefox 35 beta, the behavior is totally inconsistent.

I have created a fiddle that demonstrates the different behavior: http://jsfiddle.net/ntkawu63/

Launch that in Firefox 34+ and it will ignore the max-width: 100% on the image. In any other browser, including Firefox 33, it will apply the max-width to the image and display normally.

<style>
.mediaContainer
{
    zoom: 1;
    overflow: visible;
    position: relative;
}

.mediaCenterContainer
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.imageContainer
{
    margin: 0 auto;
}

.imageContainer img
{
    margin-bottom: 10px;
    max-width: 100%;
}
</style>

<div class="mediaContainer mediaCenterContainer">
    <div class="imageContainer">
        <img src="http://dummyimage.com/1920x1080/000/fff.png&text=This+is+a+flex+box+test+for+Firefox+340x2B.+In+Chrome,+the+image+will+be+max-width:+1000x25.+In+Firefox+the+image+will+be+centered,+but+not+have+a+constrained+width." class="Image Tag Crop" alt="My Dog" data-realwidth="1000" data-realheight="670" data-scalewidth="944" data-scaleheight="633" />
    </div>
</div>

Is there something wrong with this code, or is this something that should be raised as a bug with Mozilla?

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.