Image inside of a div resizing depending on title length on Edge

I have a problem with a div. It looks like this:

<div fxLayout="column" fxLayoutGap="20px">
  <h1 class="mat-display-1">Welcome to $TITLE$</h1>
  <img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/>
</div>

Everything works ok on chrome and firefox, but on edge the image resizes depending on the length of the h1 tag. Here’s the CSS:

.logo {
 max-width: 300px;
 max-height: 90px;
 display: block;
 width: auto;
 height: auto;
 margin: auto;
}

and the div:

flex-direction: column;
box-sizing: border-box;
display: flex;

On edge image is like:
enter image description here

And chrome:
enter image description here

Why is edge making the image bigger? How can I solve it?

Source: New feed
Source Url Image inside of a div resizing depending on title length on Edge