Child element wider than parent element

Question

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 class="img-container> <img scr="apple.jpg" class="img" /> </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?

Answer 1

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.