Some of the Image on my webpage are shrinking, but other are not shring even with same properties

<div id="bodyDiv">
   <div class="userSection" >
        <div class="headerTitle"><p>Player please choose:</p></div>
        <div class="headerDiv">
            <div class="headerSubDiv"><img class="userAddOn" src="https://images.pexels.com/photos/20414000/pexels-photo-20414000/free-photo-of-gentoo-penguin-on-snow.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></div>
            <div class="headerSubDiv"><img class="userAddOn" src="https://images.pexels.com/photos/20414000/pexels-photo-20414000/free-photo-of-gentoo-penguin-on-snow.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></div>
            <div class="headerSubDiv"><img class="userAddOn" src="https://images.pexels.com/photos/20414000/pexels-photo-20414000/free-photo-of-gentoo-penguin-on-snow.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></div>
        </div>
   </div>
   
   <div class="computerSection" >
        <div class="headerTitle"><p>Computer's choice:</p></div>
        <div class=" headerSubDiv"><img class="computerImg" src="https://images.pexels.com/photos/20414000/pexels-photo-20414000/free-photo-of-gentoo-penguin-on-snow.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" ></div>
    </div>
</div>

.userSection{
    text-align: center;
    display: flex;
   flex-direction: column;
   border-right: solid;
   border-color: black;
   border-width: 2px;
   padding: 0px 100px;
   flex-grow: 1;
}


#bodyDiv{
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px;
}
.headerDiv{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 10px;

}

.headerSubDiv{
      transition: 0.7s;
      border-radius: 50%;
      max-width: 100px;
     max-height: 100px;
 
}
.userAddOn{
 border-width: 3px;
 border: solid;
 border-color: aqua;
 border-radius: 50%;
 height: 100% ;
 width: 100%;
 
}


.computerImg{
    border: solid;
    border-width: 3px;
    border-color: brown;
    border-radius: 50%;
    height: 100%;
    width: 100%;
}

If I resizing my window,the div/img in the computerSection is not shrinking, whereas the the div/images in the userSection are skrinking when. Both of them have exactly same CSS, I have use flexbox in both of them & there is no other flex propoerty added. I am not able to figure out why the image on the right is not shrinking? Samething is happening when I write my code in the Codepen.io.

You need to sign in to view this answers

Related Post