Firefox 34+忽略flexbox的最大宽度 [英] Firefox 34+ ignoring max-width for flexbox

问题描述

我发现了我认为是Firefox 34及以上版本中关于 display：flex 行为的错误。

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

我可以确认代码一直在所有现代浏览器中工作，但仍然是，但是Firefox 34和最近的Firefox 35测试版，行为是完全不一致的。

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.

我创建了一个小提琴，演示不同的行为： http://jsfiddle.net/ntkawu63/

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

在Firefox 34+中启动它，它会忽略图片上的max-width：100％。在任何其他浏览器（包括Firefox 33）中，它会将最大宽度应用于图片并正常显示。

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>

这个代码有什么问题，或者这个东西应该作为Mozilla ？

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

推荐答案

编辑 - 原始答案不完全正确

这里的重要方面是

Edit—the original answer was not fully correct

The important aspects here are

1. flex item div.imageContainer 需要一个正 flex-shrink 值


2. （ display：inline ） img flex项目的子项需要自己的约束，以确保它不会溢出flex项


3. a href =http://www.w3.org/TR/css3-flexbox/#valdef-min-width-min-height-auto> W3C flexbox规格 ^* ，flex项目需要某种定义大小约束，我们可以通过delcaring min-width：1px c。> 最大宽度：100％在 .imageContainer 否则，根据规范， .imageContainer 必须取其内容的大小，即PNG图像的整个1000px固有大小

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的问题已经满足点2，但不是点1和3.这是我使用的CSS：

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%;
}

...和这里是一个小提琴演示它。

非常感谢@dma_k指出我的原始答案中的错误。

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

^{*我通常讨厌链接到W3C规范，但这个部分实际上是可读的;我鼓励人们阅读。}

Firefox 36（当前开发者预览）给出了如果限制 div 而不是 img 时所期望的行为。您可以使用 flex-shrink 执行此操作：

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;
}

...或短线 flex 属性：

.imageContainer {
  flex: 0 1 auto;
}

...或使用 max-width ，，

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

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

因此Firefox允许flex元素溢出他们的容器。我不知道flexbox规范，但很显然，这是真的;这就是为什么 flex-shrink 属性存在的原因。

这篇关于Firefox 34+忽略flexbox的最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！