Firefox中SVG父div宽度异常的纯CSS解决方案

问题：未设置固定宽高、仅定义viewBox的SVG放在Flex容器的子div中，Chrome里能正常并排，但Firefox中子div宽度为0，SVG堆叠在一起，需要纯CSS解决方案。

方法1：给Flex子项添加min-width: min-content #

给包裹SVG的子div加上min-width: min-content，强制Firefox根据内部SVG的最小内容尺寸计算宽度：

.container {
  display: flex;
  height: 50px;
}

.first {
  background: green;
  min-width: min-content;
}

.second {
  background: yellow;
  min-width: min-content;
}

svg {
  width: auto;
  height: 100%;
}

方法2：让SVG占满子项宽度并保持比例 #

把SVG的width设为100%，同时给子div设置flex: 0 0 auto确保不被压缩，这样子div会根据SVG的宽高比自动调整宽度：

.container {
  display: flex;
  height: 50px;
}

.first {
  background: green;
  flex: 0 0 auto;
}

.second {
  background: yellow;
  flex: 0 0 auto;
}

svg {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 可选，防止SVG拉伸变形 */
}

差异原因 #

Chrome会自动根据SVG的viewBox和设定的height计算对应宽度，并让Flex子项适配这个宽度；但Firefox处理Flex子项时，默认不会基于内部替换元素（比如SVG）的内在尺寸计算宽度，导致子项宽度塌陷为0。上面两种方法分别通过强制子项使用内容宽度、让SVG占满子项来触发正确的宽度计算，让Firefox表现和Chrome一致。

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