So no matter what image I try to use when placing it in the flex container head-top-right, it expands my flex container while distorting the image next to it and also expands the outer flex container. How do I place any image while also not expanding the flex item the image is in and also distorting the images next to it. I have max-height:100%; but it's not helping and I assume that it's because the parent container does not have a height set. Is that a possibility?
.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>