I have an svg object with `width: 200px` and `height: auto`. on (almost) every browser (edge, firefox, opera - all updated), the height seems to be as expected - `60.27px`, calculated by browser. But IE11... makes my life harder (I can't say it was surprising). See the differences:

[![IE11 height: auto, Opera 58.0 height: auto and ff 66.0 height: auto](https://i.stack.imgur.com/GBMxZ.png)](https://i.stack.imgur.com/GBMxZ.png)

svg code:

```html
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 162.229 48.884" enable-background="new 0 0 162.229 48.884" xml:space="preserve">
        <rect fill="#111111" width="162.229" height="48.884"/>
    </svg>
```

css:

```
._logo svg {
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

```

(`._logo` contains `box-sizing: border-box`)

Why is this happening?