Internet Explorer doesn't properly scale svg inside flex-box

I have an inline svg with a viewBox. When the svg is wrapped in a div, which is then inside a flexbox, the dimensions are not calculated properly by IE(11).
Here is a example of the issue:
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%;



Same code on JSbin:
JSBin

On chrome for example, it works as expected. I need a responsive design, which works in IE too and since I am using bootstrap grid (which is just a flexbox) I need a solution for this. Thank you.

0

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy