Firefox 34+ ignores maximum width for flexbox

Question

I found that I consider it a mistake in versions of Firefox 34 and higher regarding display: flex behavior.

I can confirm that the code has always worked in all modern browsers and still works, but Firefox 34 and the recent beta version of Firefox 35, the behavior is completely inconsistent.

I created a fiddle showing different behavior: http://jsfiddle.net/ntkawu63/

Run this on Firefox 34+ and it will ignore the maximum width: 100% on the image. In any other browser, including Firefox 33, it will apply the maximum width to the image and display as usual.

 <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 it something that should be raised as a bug with Mozilla?

Answer 1

Edit - the original answer was not entirely correct

The important aspects here are

• The flex element div.imageContainer needs a positive flex-shrink value
• The child element ( display:inline ) img of the flex element requires its own restriction to ensure that it does not overflow the flex element.
• According to the W3C flexbox spec ^* , the flex element requires a certain size limit, which we can satisfy by delcaring min-width:1px or max-width:100% on .imageContainer ; otherwise, in accordance with the specification, the .imageContainer must accept its content size, i.e. the full native size of the PNG image, equal to 1000px.

The OP question is already satisfied with point 2, but not with points 1 and 3. Here is the CSS that I used:

 .mediaContainer { overflow: visible; width:100%; } .mediaCenterContainer { display: flex; } .imageContainer { flex-shrink:1; min-width:1px; } .imageContainer img { max-width:100%; } 

... and here is a violin showing it.

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

^{* I usually hate the W3C specs link, but this section is actually quite readable; I would recommend people read it.}

---

Original answer

Firefox 36 (currently a preview of dev) gives the behavior that you would expect if you are restricting the div, not img. You can do this using flex-shrink :

 .imageContainer { flex-shrink:1; } 

... or short flex property:

 .imageContainer { flex: 0 1 auto; } 

... or using the max-width declaration that you posted on img , but also on the div :

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

Thus, Firefox allows flexible elements to overflow their containers. I do not know the flexbox specification very well, but it seems natural that it will be so; therefore, the flex-shrink property exists.