Different behavior of SVG image in Chrome and IE 11 - html

Question

I have an svg image and I am using flex to center the svg image inside div. svg image is getting properly centered in Chrome, but if I am trying to use the same behavior in IE 11, svg image is getting completely expanded and it covers the entire div.
jsbin link: https://jsbin.com/qufuqekera/1/edit?html,css,output
.svgImage {
width: auto;
display: flex;
align-items: center;
height: 100%;
padding-left: 10px;
padding-right: 10px;
}
svg {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: left;
transform-origin: left;
position: absolute;
border: 1px solid red;
background-color: yellow;
}
.defaultSize {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid black;
padding-top: 18px;
padding-bottom: 18px;
}
.scroll-bar {
overflow: auto;
position: absolute;
width: 100%;
}
.container {
height: 60vh;
position: relative
}
<div class="container">
<div class="defaultSize">
<div class="scroll-bar" style="height: calc(100% - 36px)">
<div class="svgImage">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1575.01 278.01">
<defs>
<style>.cls-1,.cls-3{fill:#009a38;stroke:#000;stroke-miterlimit:10;}.cls-1{stroke-width:1.01px;}.cls-2{font-size:7px;fill:#f2f2f2;font-family:SiemensSans-Roman, Siemens Sans;}.cls-3{stroke-width:0.99px;}.cls-4{fill:#c8c8c8;}</style>
</defs>
<title>SVG Image</title>
<g id="Layer_2" data-name="Layer 2">
<g id="svgImage" data-name="SVG Image">
<g id="Auto_SVGImage" data-name="Auto_SVGImage">
<g id="Right_Image" data-name="Right Image">
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
Screenshot of output in Chrome displaying as expected: https://i.stack.imgur.com/COSm1.png
Screenshot of output in IE 11: https://i.stack.imgur.com/CWxo9.png