Responsive layout: stretched images on Safari

Question

this is my layout.

The desired behavior is that when I resize the window vertically the image scales maintaining the original aspect ratio.

My code works very well in all browser except Safari (you can see it by trying the snippet in different browsers).

Do you have a solution? Thanks ;)

.wrap-container{
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: yellow;
  height: 55vh;
}

.wrap{
  width: 700px;
  background-color: aqua;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 64px;
}

.wrap img{
    height: 100%;
    width: auto;
    max-width: 300px;
    max-height: 300px;
}

<div class="wrap-container">
  <div class="wrap">
    <img src="https://via.placeholder.com/300"/>
  </div>
</div>

Answer 1

Add flex: 0; on the image

.wrap-container{
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: yellow;
  height: 55vh;
}

.wrap{
  width: 700px;
  background-color: aqua;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 64px;
}

.wrap img{
    height: 100%;
    width: auto;
    flex: 0;
    max-width: 300px;
    max-height: 300px;
}

<div class="wrap-container">
  <div class="wrap">
    <img src="https://via.placeholder.com/300"/>
  </div>
</div>