Internet Explorer无法在伸缩框中正确缩放svg

Question

我有一个带viewBox的内嵌svg。将svg包裹在div中，然后将其包装在flexbox内时，IE（11）无法正确计算尺寸。 这是问题的示例： HTML：

<div id="main">
  <div>
      <svg viewBox="0 0 50 100">
          <path d="m0,-5 l40, 55 l-40,55" />
      </svg>
  </div>
</div>

CSS：

#main {
  background: blue;
  width: 100%;
  height: 100px;

  display: flex;

}


#main > div {

  height: 80%;
  background: red;
  overflow: hidden;
}

svg {
  stroke: black;
  fill: none;
  stroke-width: 3px;
  height: 100%;
}

JSbin上的相同代码： JSBin

例如，在chrome上，它可以正常工作。我需要一个响应式设计，该设计也可以在IE中使用，并且由于我使用的是Bootstrap网格（这只是一个Flexbox），因此我需要一个解决方案。谢谢。