Firefox下Flexbox子元素设height:100%时边距异常问题求解

我被该问题困扰已超过一周，始终未找到对应的合理解释与解决方案。

问题表现 #

我基于Flexbox实现了一个水平滚动轮播，不同浏览器下运行效果存在明显差异：

• Chrome浏览器中运行效果符合预期，元素间margin间距显示正常
• Firefox浏览器中打开相同页面时，会出现元素边距过宽的显示异常

排查结论 #

经逐一调试属性影响，确认异常由main标签内的<section>标签设置height: 100%导致：

移除该height: 100%属性后，边距显示可恢复正常，但轮播内部的图片无法完成正确缩放。

效果对照 #

• Chrome下预期效果：
  
• Firefox下异常效果：
  

内容的提问来源于stack exchange，提问作者Florian