Firefox 34忽略flexbox的最大宽度[重复]

Question

我在Firefox 34及以上版本中发现了一个与显示行为有关的错误： flex。

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

我制作了一把小提琴，展示了不同的行为：http://jsfiddle.net/ntkawu63/

在Firefox34中启动它，它将忽略图像上的最大宽度：100%。在任何其他浏览器中，包括Firefox33，它都会将最大宽度应用于图像并正常显示。

<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应该引起的bug？

Answer 1

这里的重要方面是

1. flex项目div.imageContainer需要一个正的flex收缩值
2. flex项的（show： inline）img子项需要自己的约束来确保它不会溢出flex项
3. 根据W3C flexbox规范^*，flex项需要某种明确的大小约束，我们可以通过在上删除min-ware： 1px或max-ware： 100%来满足。ImageContainer；否则，根据规范，. ImageContainer必须采用其内容的大小，即PNG图像的完整1000px固有大小

OP的问题已经满足了第2点，但不是第1点和第3点。以下是我使用的CSS：

.mediaContainer
{
    overflow: visible;
    width:100%;
}

.mediaCenterContainer
{
    display: flex;
}

.imageContainer
{
    flex-shrink:1;
    min-width:1px;
}
.imageContainer img {
    max-width:100%;
}

...这里有一把小提琴来演示它。

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

^{*我通常讨厌链接到W3C规范，但这一部分实际上很可读；我会鼓励人们阅读它。}

如果您约束div而不是img，那么firefox36（当前为dev预览版）将提供您期望的行为。您可以使用flex shrink来执行此操作：

.imageContainer {
  flex-shrink:1;
}

...或短手flex属性：

.imageContainer {
  flex: 0 1 auto;
}

…或使用您在img上以及div上的max width声明：

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

因此Firefox允许flex元素溢出其容器。我不太了解flexbox规范，但这种情况似乎很自然；这就是flex-shrink属性存在的原因。