Html Firefox和Chrome中Flexbox的不同实现

以下代码在Firefox中正常工作，但在Chrome中，图像比flex容器大得多

.r{
宽度：100%；
高度：自动；
最小宽度：未设置；
最大宽度：100%；
}
.集装箱{
显示器：flex；
宽度：600px；
}

以下代码在Firefox中正常工作

我不同意这一点，因为对我来说，Chrome的表现符合预期，原因有二：

您将图像的宽度设置为

100%

，这意味着其包含块（容器）的100%由

600px

定义。因此，每个图像将

600px

由于默认的

minwidth

配置，图像无法显示（请注意，在本例中使用，因此它毫无用处）。因此图像将保持在

600px

如果添加

minwidth:0

图像将仅在宽度上缩小：

.r{
宽度：100%；
/*高度：自动；无用*/
最小宽度：0；
最大宽度：100%；
}
.集装箱{
显示器：flex；
宽度：600px；
}

---

感谢@TemaniAfif为我指引了正确的方向，我想到了这个：

.r{
宽度：100%；
身高：100%；
最小宽度：0px；
最大宽度：100%；
}
.集装箱{
显示器：flex；
宽度：600px；
}

---

@TheRuler，最好的解决方案是将图像标签包装在div或span中，以按照Firefox呈现图像。如果将图像包装在div或span中，Firefox也可以正常工作

现在你可以问我为什么这是正确的

基本上，display flex附带了默认值，即：

flex-grow: 0
flex-shrink: 1
flex-basis: auto
flex: 0 1 auto /* Shorthand */

现在，Firefox和Chrome的默认值都是相同的。但两种浏览器中的渲染仍然不同，特别是在图像作为flex子对象的情况下

现在，谁是正确的是有争议的，谁正确地遵循指导方针也是有争议的

如果你看看flex的规范，它说，flex规则应该优先于CSS的宽度和高度属性。因此，在本例中，Firefox正在缩小图像的大小，以使其适合600px的父级

现在如果你看到这个例子

.container { display: flex; flex-direction: column;}
.container > div { flex: 1; height: 300px;}

<div class="container">
  <div>Single line in Firefox, but 300px tall in Chrome!</div>
</div>

.container{display:flex；flex-direction:column；}
.container>div{flex:1；高度：300px；}
Firefox中只有一行，但Chrome中有300px的高度！

因此，如果您在两个浏览器中都看到此代码，您将看到差异。Chrome为flex子级的height属性赋值，而Firefox不为其赋值。图像高度和图像宽度也是如此。铬不占优势的高度

所以这两个浏览器都有自己的实现，在这种情况下，这两个浏览器不匹配，谁是正确的还存在争议

因此，将它们包装在span或div中，使其在两个浏览器中都能工作，这应该是正确的答案，不会出现任何问题。其他解决方案可以解决问题，但它们是解决问题的黑客

如果你收到了，请告诉我

---

谢谢

Try.r{max width:100%；height:auto}始终避免将img作为flex项目，将其包装在flex中item@TemaniAfif但这不是一个真正的解决方案，是吗。我只是想知道为什么会有两种不同的实现，这是一个令人失望的结果。@termaniaff谢谢你的解释。因此，真正的firefox实现了错误。。谁知道呢？：谢谢你的信息@我不会说这是错的，但我们有一些特殊情况，它们是不一样的。也许在将来它会被纠正，所以我们有相同的行为，错误是错误的词-我的意思是不同的。再次感谢@TheRuler我添加了另一个方法来解释我之前添加额外divhi的评论！谢谢你的解释，现在我了解更多了，我提供了一个似乎有效的答案。你能看一下，告诉我是否需要改变什么吗。谢谢