Html 为什么Firefox会忽略flex项的底部边距？

只有当有足够的空间时，它才尊重

页边距底部。否则Firefox的行为就好像根本没有
边距底部

全铬：


铬收缩：


Firefox缩小了：


flexbox的行为是否正确？如何修复它



.container{
位置：固定；
显示器：flex；
弯曲方向：立柱；
排名：0；
左：0；
右：0；
底部：0；
溢出：自动；
}
.成长{
柔性生长：1；
弹性收缩：0；
背景：#8f8；
}
.内容{
宽度：500px；
保证金：20px自动；
边框：1px纯色；
背景：#f88；
}

Lorem ipsum dolor sit amet，奉献精英。Volupatibus，facilis omnis inventore，illum eos quas quos id，labore Concertetur quas。你的名字是什么

Lorem ipsum dolor sit amet，奉献精英。别名asperiores a enim magnam voluptatem。根据对物权的解释，准铜酸盐对共和国的真实性具有保护作用

我认为这就是发生的情况：当窗口太小时，
元素会一直缩小到0像素的高度。现在Firefox甚至不需要渲染它们。因此，在
元素下面没有任何元素，因此该元素的底部边距不会被应用。一个页面只有一个元素和底部边距具有相同的效果

我会以不同的方式设置html/css，这样您就不会遇到这个问题。例如，您可以在
content
div周围使用一个容器，并在其上应用填充。
我坚持
弹性方向：行
，只有一个弹性项具有
边距：auto
。我把我的容器放在里面。这样，它在Chrome、Firefox、IE和Safari中就可以正常工作：



.container{
位置：固定；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒方向：水平；
-webkit盒方向：正常；
-webkit柔性方向：行；
-ms柔性方向：行；
/*使用*column*Safari 9.0及以下版本时，将忽略底部边距*/
弯曲方向：行；
排名：0；
左：0；
右：0；
底部：0；
溢出：自动；
背景：#f88；
}
.内容包装器{
保证金：自动；
}
.内容{
宽度：500px；
利润率：20px；
边框：1px纯色；
背景：#8f8；
}

Lorem ipsum dolor sit amet，奉献精英。Volupatibus，facilis omnis inventore，illum eos quas quos id，labore Concertetur quas。你的名字是什么

Lorem ipsum dolor sit amet，奉献精英。别名asperiores a enim magnam voluptatem。根据对物权的解释，准铜酸盐对共和国的真实性具有保护作用

考虑在
.grow
中添加
弹性基础@Michael_B使用
flex basis
您将强制拥有
.grow
高度至少为1px的元素。当屏幕太小时，我不想要它们。这是正确的行为吗（Chrome和IE没有这个问题）？