Chrome中Flexbox布局SVG出现上下留白的原因及解决方法

我来帮你分析这个问题并给出对应的解决方案：

快速解决方法 #

直接给你的SVG元素添加 height: 100% 样式，就能消除Chrome中出现的上下留白问题。修改后的CSS如下：

#container { 
  border: 1px solid black; 
  display: flex; 
  justify-content: space-between; 
} 
#directional { 
  width: 33.3%;
  height: 100%; /* 新增这一行核心样式 */
}

问题原因拆解 #

这个问题是Chrome浏览器对Flex容器中SVG元素的默认尺寸计算逻辑导致的：

• 当SVG作为Flex子元素时，Chrome会优先使用SVG自身的固有高度（基于内部图形内容的尺寸），而不是继承Flex容器的高度，这就导致了容器上下出现多余留白。
• Firefox的尺寸计算逻辑更贴合Flex布局的预期，会让SVG自适应容器高度，所以没有这个问题。

至于你提到的复现差异（本地站点、JSFiddle、Stack Overflow沙箱表现不一致），大概率是不同环境的默认样式或容器上下文不同：

• JSFiddle和Stack Overflow的沙箱可能自带了全局样式重置，或者容器的高度被隐式定义（比如父元素有明确高度），抵消了Chrome的默认行为。
• 本地站点没有这些额外样式，所以Chrome的默认尺寸计算逻辑直接暴露了出来。

备选方案 #

如果height:100%在某些场景下不适用，你也可以尝试给SVG添加 display: block 样式，这能避免行内元素默认的基线对齐带来的间距问题，同样能解决留白问题。

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