Child element wider than parent element-CodePudding

I started learning HTML and CSS and encountered the following problem. It is said, that a child element is always (as of now) smaller than the parent container. Here is the thing I don't understand.

.img-container {
   border: 10px solid crimson;
   width: 100px;
}

.img {
   width: 300px;
}

<div apple.jpg"
     
   />
</div>

And this is what I get in the browser: index.html

I've researched a lot but still didn't get it. Why is the child element (the image) wider than the parent container?

CodePudding user response：

you do understand that you gave the image a width of 300px when your container has a width of 100px right? i mean you literally made the image wider than container yourself

you can use overflow to handle this. give overflow:hidden to your container to hide anything that does not fit inside it. or overflow:auto to scroll.