Firefox 34+ ignoring max-width for flexbox

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?

Flex box is wrecked in recent Firefox versions. I hope they will fix it soon. See this one also, may be helpful http://stackoverflow.com/q/27424831/95970 — Ashraf Sabry, Dec 15 '14 at 15:28
@AshrafSabry you should try to get [the spec](http://www.w3.org/TR/css3-flexbox/#valdef-min-width-min-height-auto) changed! — Jeremy, Apr 19 '15 at 22:51

score 14 · Accepted Answer · edited Jun 20 '20 at 09:12

Edit—the original answer was not fully correct

The important aspects here are

The "flex item" div.imageContainer needs a positive flex-shrink value
The (display:inline) img child of the flex item needs its own constraint to ensure it doesn't overflow the flex item
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.

I suppose the image should be displayed in a way, that no horizontal scrollbar appears. I have tried all solutions on nightly build v37.0a1 and none of them worked. Where can I download the version you're using? — dma_k, Jan 08 '15 at 15:33
@dma_k You may have seen an incorrectly-edited version. I've updated my answer, and you can see a corrected fiddle [here](http://jsfiddle.net/ntkawu63/3/). Firefox dev edition (currently v36) is just the "Aurora" channel; it's available from https://www.mozilla.org/en-US/firefox/developer/ — Jeremy, Jan 11 '15 at 22:02
Many thanks. In your Fiddle you have applied the 3rd solution (`max-width` on both `div` and `img`), but have you got demo for 1st or 2nd solutions (using flex-box)? — dma_k, Mar 05 '15 at 14:48
@dma_k my apologies, it looks like I did not understand what I was doing when I wrote the answer. First of all, [here](http://jsfiddle.net/ntkawu63/4/) is an updated fiddle illustrating the minimum CSS required. Secondly, the *important* thing is that the flex item (`.imageContainer`) needs *some kind of width constraint*, per the [w3c flexbox spec](http://www.w3.org/TR/css3-flexbox/#valdef-min-width-min-height-auto). I'll try to write this up into a real answer at some point. — Jeremy, Mar 05 '15 at 23:35

Firefox 34+ ignoring max-width for flexbox

1 Answers1

Edit—the original answer was not fully correct

Original answer

Linked

Related