Question

我已经发现了我认为在{34}及更高版本的Firefox版本中出现的关于display: flex行为的错误。

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

我创造了一个演示不同行为的小提琴：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的错误引发？

Answer 1

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

这里的重要方面是

＆＃34; flex项目＆＃34; div.imageContainer需要积极的flex-shrink值
弹性项目的（display:inline）img子项需要自己的约束以确保它不会溢出弹性项目
根据W3C flexbox spec ^* ，Flex项目需要某种明确的大小约束，我们可以满足通过在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规范，但这部分实际上非常易读;我鼓励人们阅读。}

原始答案

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属性存在的原因。

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

1 个答案:

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

原始答案