I am facing an issue with a div element. Here is the code snippet:
<div fxLayout="column" fxLayoutGap="20px">
<h1 class="mat-display-1">Welcome to $TITLE$</h1>
<img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/>
</div>
While everything seems to be working fine on Chrome and Firefox, the image in Edge resizes depending on the length of the h1 tag. The CSS responsible for this behavior is as follows:
.logo {
max-width: 300px;
max-height: 90px;
display: block;
width: auto;
height: auto;
margin: auto;
}
The flex-direction property of the div is set to column:
flex-direction: column;
box-sizing: border-box;
display: flex;
In Edge, the image appears larger than expected: https://i.stack.imgur.com/vVRn3.png
While in Chrome, it looks like this: https://i.stack.imgur.com/3fp86.png
Why does Edge enlarge the image? How can I troubleshoot and resolve this issue?