Firefox 34+忽略了flexbox的最大宽度

Question

我已经发现了我认为是Firefox 34及以上版本中有关行为的错误display: flex.

我可以确认代码一直在所有现代浏览器中都有效,但仍然如此,但Firefox 34和最近的Firefox 35测试版的行为完全不一致.

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

在Firefox 34+中启动它,它将忽略图像上的最大宽度:100%.在任何其他浏览器(包括Firefox 33)中,它会将最大宽度应用于图像并正常显示.

<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. 该"柔性项目" div.imageContainer需要一个积极的flex-shrink价值
2. Flex项的(display:inline)img子项需要自己的约束,以确保它不会溢出flex项
3. 根据W3C flexbox规范^*,flex项目需要某种确定的大小约束,我们可以通过delcaring min-width:1px 或 max-width:100% on 来满足.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规范,但这部分实际上非常易读; 我鼓励人们阅读它.}

原始答案

Firefox 36(当前是开发预览版)给出了你期望的行为,如果你约束div而不是img.你可以这样做flex-shrink:

.imageContainer {
  flex-shrink:1;
}

......或者是短手的flex财产:

.imageContainer {
  flex: 0 1 auto;
}

...或者使用max-width您放置的声明img,但也使用div:

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

因此Firefox允许flex元素溢出其容器.我不太了解flexbox规范,但看起来很自然; 这就是flex-shrink财产存在的原因.