嵌套Flexbox中Firefox下image width=100%失效，Chrome正常的原因与CSS修复

现象原因 #

这并非浏览器bug，而是Firefox与Chromium对CSS flex布局中尺寸循环依赖场景的实现差异：

• 你的.image设置了width: 100%，其宽度完全依赖父容器.graphic的宽度
• .graphic是flex容器，但它的父元素.container没有明确的宽度约束，且.dashboard作为外层flex容器，默认会让.container的宽度由内容决定
• Firefox在处理这种"父容器宽度依赖子元素，子元素宽度又依赖父容器"的循环时，会将容器宽度收缩至最小（0px），导致SVG无法显示；而Chromium会优先使用SVG的固有尺寸推导容器宽度，因此能正常渲染

解决方案（仅修改CSS，不改动HTML） #

以下几种方案均可解决问题，根据你的实际布局需求选择：

方案1：给.container设置宽度约束 #

让.container占满外层flex容器的可用宽度，确保.graphic能继承明确的宽度：

.container {
  width: 100%;
}

方案2：直接给.graphic设置宽度 #

明确flex容器.graphic的宽度，让width:100%的图片有明确的参照：

.graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

方案3：让.container成为flex容器的可扩展项 #

通过flex:1让.container占满.dashboard的可用宽度，间接给.graphic提供宽度参照：

.dashboard > .container {
  flex: 1;
}

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