title: Firefox 34+ ignoring max-width for flexbox
body: <p>I have discovered what I believe to be a bug in Firefox versions 34 and above with regards to the behavior of <code>display: flex</code>.</p>
  
  <p>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.</p>
  
  <p>I have created a fiddle that demonstrates the different behavior: <a href="http://jsfiddle.net/ntkawu63/">http://jsfiddle.net/ntkawu63/</a></p>
  
  <p>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.</p>
  
  <pre><code>&lt;style&gt;
  .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%;
  }
  &lt;/style&gt;
  
  &lt;div class="mediaContainer mediaCenterContainer"&gt;
      &lt;div class="imageContainer"&gt;
          &lt;img src="http://dummyimage.com/1920x1080/000/fff.png&amp;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" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there something wrong with this code, or is this something that should be raised as a bug with Mozilla?</p>