[SOLVED] How come my <div> contents are overflowing even though I set borders, padding, and box-sizing to border-box on that <div>?

How come my <div> contents are overflowing even though I set borders, padding, and box-sizing to border-box on that <div>?

I am following the FreeCodeCamp curriculum for responsive web design. I am on the module "Learn CSS Flexbox by Building a Photo Gallery" step 9. We are learning about the border-box box-sizing property. MDN has the following description for that property:

"border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added,** and the content box will shrink to absorb that extra width**."

I wanted to test my knowledge and set border-box only on the .gallery element, and remove any styling on the elements. My understanding is that the elements contained in the .gallery container should shrink to fit inside of .gallery (since the elements are contained within the "content box" of the .gallery container). However it does not - it overflows. Below is the html and css, the html is unchanged (from the start of the lesson) but I did mess around with the css, again to test my knowledge:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>
  </body>
</html>

.gallery {
  border: 5px solid red;
  width: 50%;
  box-sizing: border-box;
  padding: 10px;
  
}

Rendering:

Is MDN wrong, and it is not the case that the content of the element (on which border-box is applied) shrinks to accommodate border and padding in the element's width and height? Or is there some knowledge I am missing/misunderstanding?

Thanks in advance.

Solution

As per @TemaniAfif comment, there is a distinction between "content" and "content box". The MDN says that the "content box" is shrunk, not the "content". The content can still overflow the content box (as well as the rest of the container element), and that is what I am observing.