如何在保持图像纵横比的同时阻止图像扩展我的Flex容器？

Question

因此，无论我在将其放置在Flex容器中头顶右时尝试使用哪种图像，它都会在扭曲旁边的图像时扩展我的挠性容器，并扩展外部挠曲容器。我如何放置任何图像，同时也没有扩展图像所在的flex项目并扭曲其旁边的图像。我有Max-Height：100％;，但这没有帮助，我认为这是因为父容器没有高度集。这是可能的吗？

.head {
  grid-column: 2/3;
  grid-row: 1/2;
  border: solid 1px red;
  padding: 38px 40px;
}

.head-top {
  display: flex;
}

.head-search {
  width: 40%;
  border-radius: 15px;
  background-color: lightgrey;
}

.search-img {
  margin-right: 15px;
}

.head-top-right {
  display: flex;
  width: 45%;
  margin-left: 30px;
  border: solid black 1px;
}

.head-profile-pic {
  max-height: 100%;
}

<div class="head">
  <div class="head-top">
    <img src="pic/magnify.png" class="search-img">
    <input type="text" name="search" class="head-search" />
    <div class="head-top-right">
      <img src="pic/notifications.png">
      <img src="pic/earth.jpg" class="head-profile-pic">
    </div>
  </div>
</div>