Cannot resize image in CSS because it overflows a <div> - html

Question

I have the following code:
JavaScript:
import React, { useState } from "react";
import logo from "../Static/white_lotus.jpeg";
import "./LogoSearchProfile_Header.css";
function Header() {
return (
<div className="header">
<div className="header-left">
<div className="header-logo-link">
<img
className="header-logo"
src={logo}
alt=""
/>
</div>
</div>
</div>
);
}
export default Header;
LogoSearchProfile_Header.css:
.header {
display: flex;
align-items: center;
height: 60px;
position: sticky;
top: 0;
z-index: 100;
background-color: white;
border-bottom: 1px solid lightgray;
}
.header-left{
margin-left: 2%;
justify-content: space-between;
display: flex;
width: 50px;
height: inherit;
align-items: center;
background-color: red ;
}
.header-logo > img {
height: 20px;
}
where I'm using this image (white_lotus.jpeg) as my logo:
Currently, this produces:
where the <img> overflows the <div>, and despite everything I try, I can't change the size of the image. Altering the tag header-logo does nothing, it seems. Is there anything I can do? Why does this happen?

Answer 1

Your image itself has the class header-logo and your CSS is selecting its children with >. Try changing your CSS from .header-logo > img to .header-logo or just img.
.header {
display: flex;
align-items: center;
height: 60px;
position: sticky;
top: 0;
z-index: 100;
background-color: white;
border-bottom: 1px solid lightgray;
}
.header-left{
margin-left: 2%;
justify-content: space-between;
display: flex;
width: 50px;
height: inherit;
align-items: center;
background-color: red ;
}
.header-logo {
height: 20px;
}
<div class ="header">
<div class ="header-left">
<div class ="header-logo-link">
<img class ="header-logo"
src=https://i.stack.imgur.com/CSimC.jpg
alt=""/>
</div>
</div>
</div>

Answer 2

Using .header-logo > img is instructing the browser to look at the child of header-logo which in fact there is none.
Your height: 20px is essentially calling to both the image and the class associated with it, which is unnecessary. I would suggest using one or the other, like below.
EDIT ~ you can also use a negative z-index or overflow-y: hidden; to have the overflow of the image appear behind the div. So it doesn't appear to be "larger" anymore.
.header {
display: flex;
align-items: center;
height: 60px;
position: sticky;
top: 0;
z-index: 100;
background-color: white;
border-bottom: 1px solid lightgray;
}
.header-left {
margin-left: 2%;
justify-content: space-between;
display: flex;
width: 50px;
height: inherit;
align-items: center;
background-color: red;
}
.header-logo {
height: 20px;
}
/* img {
height: 20px;
} */
<div className="header">
<div className="header-left">
<div className="header-logo-link">
<img class="header-logo" src="https://i.ibb.co/3WWwMHR/CSimC.jpg" alt="" />
</div>
</div>
</div>

Answer 3

Overflow happens when content exceeds parent height. Make content height match parent/container height, or do not set height with arbitrary fixed measurements.

Answer 4

I think what you are trying to do is the following:
.header-left > img {
height: 20px;
}
Or
.header-logo {
height: 20px;
}
As the img's class is header-logo and the selecter > means an img whose parent has class header-logo which is not the case here.