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

Question

我在 Firefox 34 及更高版本中发现了一个关于 display: flex 行为的错误。

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

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

在 Firefox 34+ 中启动它，它将忽略图像上的 max-width: 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 的错误提出？

Answer 1

编辑——原来的答案并不完全正确

这里的重要方面是

1. “弹性项目”div.imageContainer 需要一个正的 flex-shrink 值
2. 弹性项目的 (display:inline) img 子项需要自己的约束，以确保它不会溢出弹性项目
3. 根据W3C flexbox spec^*，弹性项目需要某种明确的尺寸约束，我们可以通过删除min-width:1px来满足或 max-width: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%;
}

…和here's a fiddle 演示它。

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

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

---

原答案

如果您限制 div 而不是 img，

Firefox 36（当前为开发预览版）会提供您所期望的行为。您可以使用flex-shrink：

.imageContainer {
  flex-shrink:1;
}

… 或简写的flex 属性：

.imageContainer {
  flex: 0 1 auto;
}

...或者使用您在img 上放置的max-width 声明，也可以在div 上使用：

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

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