Что вызывает это пустое пространство во flexbox в Chrome и как я могу от него избавиться?

Question

Я пытаюсь создать простой пэд, и я сталкиваюсь с проблемой при попытке использовать flexbox для разделения левой и правой кнопок.Сами компоненты кнопки являются SVG.Использование display: flex приводит к появлению пустого пространства сверху и снизу SVG, которое мне не нужно.Странно, если я сделаю их divs, проблема не существует.Это происходит только в 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, но не SO.

РЕДАКТИРОВАТЬ: решение Пола было правильным, добавление 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/