Изображение масштабируется по-разному в зависимости от браузера, если используется свойство display flex

Question

У меня есть следующие простые HTML и CSS:

.profile {
  width: 80%;
  margin-top: 15vh;
  margin-left: 10%;
  display: flex;
  float: left;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.profile_picture {
  float: left;
  width: 100%;
  height: 70%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.profile_picture img {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.profile_discription {
  padding: 1%;
  float: left;
}

<div class="profile">
		
  <div class="profile_picture">
  <img src="http://placehold.it/450x150">
  </div>
			
  <div class="profile_description">
  <p> Description goes here. </p>
  </div>
			
<div>

Код отображает веб-сайт с профилем, состоящим из изображения и описания.
Вы также можете найти код в jsfiddle здесь .

Пока все это прекрасно работает.

---

Однако проблема в том, чтоКак только я использую свойство display: flex; в классе .profile, изображение отображается в разных размерах в зависимости от того, использую ли я Edge, Firefox или Chrome.

Есть ли у вас какие-либо идеи, как я могу избежать различных размеровизображение и все еще сможете использовать свойство display:flex;?