是什么导致 Chrome 的 flexbox 中出现这个空白，我该如何摆脱它？

Question

我正在尝试创建一个简单的方向键，但在尝试使用 flexbox 分隔左右按钮时遇到了问题。按钮组件本身是 SVG。使用 display: flex 在 SVG 的顶部和底部引入了我不想要的空白。奇怪的是，如果我将它们设为 div，则问题不存在。这只发生在 Chrome 上，它适用于 Firefox。

这是有问题的代码：https://jsfiddle.net/j1etr0ph/

这是我想要的解决方案，但使用 SVG：https://jsfiddle.net/j1etr0ph/1/

更奇怪的是，它似乎可以在 Stack Overflow 的代码沙箱中运行。

#container {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
}

#directional {
  width: 33.3%
}

<div id="container">
  <svg id="directional" viewBox="0 0 30 30">
    <g id="circle">
      <path id="fill" fill="#D1D3D4" d="M15,29.5C7,29.5,0.5,23,0.5,15S7,0.5,15,0.5S29.5,7,29.5,15S23,29.5,15,29.5z"/>
      <path id="outline" fill="#414042" d="M15,1c7.7,0,14,6.3,14,14s-6.3,14-14,14S1,22.7,1,15S7.3,1,15,1 M15,0C6.7,0,0,6.7,0,15
        s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0L15,0z"/>
    </g>
    <polygon id="arrow" fill="#414042" points="6.3,20 15,5 23.7,20 	"/>
  </svg>
  <svg id="directional" viewBox="0 0 30 30">
    <g id="circle">
      <path id="fill" fill="#D1D3D4" d="M15,29.5C7,29.5,0.5,23,0.5,15S7,0.5,15,0.5S29.5,7,29.5,15S23,29.5,15,29.5z"/>
      <path id="outline" fill="#414042" d="M15,1c7.7,0,14,6.3,14,14s-6.3,14-14,14S1,22.7,1,15S7.3,1,15,1 M15,0C6.7,0,0,6.7,0,15
        s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0L15,0z"/>
    </g>
    <polygon id="arrow" fill="#414042" points="6.3,20 15,5 23.7,20 	"/>
  </svg>
</div>

有谁知道是什么原因造成的以及如何摆脱它？

编辑：所以它似乎不能完全重现。 * 在 Windows 上，Firefox 中不存在该问题。在 Chrome 中，它只存在于我的本地站点上，而不是 JSFiddle 或 SO 代码。 * 在 Mac 上，我还没有测试过 Firefox。在 Chrome 中，它存在于我的本地站点和 JSFiddle 上，但不存在。

编辑：Paul 的解决方案是正确的，将 height: 100% 添加到 SVG 解决了问题。由于它似乎只发生在我的本地站点上（仍然好奇为什么），这是带有和不带有 height 属性的屏幕截图：

与height: 100%：https://i.stack.imgur.com/gResy.png
没有：https://i.stack.imgur.com/whnxU.png

Answer 1

尝试将height: 100% 添加到您的 SVG。

#directional {
  width: 33.3%;
  height: 100%;
}

https://jsfiddle.net/j1etr0ph/2/