Image exceeds parent (child div exceeds parent div) - html

Question

I have read all answers I think to this SO question, and changed max-height to every different combination, but it still bothers me;
I have the following
<div class="content-section">
<div class="products-container">
{% for p in current_lists %}
<div class="item">
<div class="image-wrapper">
<img src="{{p.image_url}}" alt="Image of product added" />
</div>
<div class="total-price">{{price}}
</div>
</div>
{% endfor %}
</div>
</div>
and CSS
* {
box-sizing: border-box;
}
.products-container{
display: flex;
align-items: center;
background-color: blue;
}
.products-container .item{
max-width: 30%;
max-height: 50%;
margin: 10px;
background-color: blueviolet;
}
img{
max-width: 100%;
max-height: 100%;
}
The issue is, that the image expands outside the blue-box
I have tried changing max-height in img and in products-container .item down to 10%, but it does not scale the big image at all.

Answer 1

If height is the issue then I would say:
width:100%;
height:auto;
I added your bits into a codepen and didn't have the issue:
https://codepen.io/liam88/pen/zYwYNVN
<div class="content-section">
<div class="products-container">
<div class="item">
<div class="image-wrapper">
<img src="https://source.unsplash.com/user/erondu/600x600" alt="Image of product added"/>
</div>
<div class="total-price">£12.99</div>
</div>
<div class="item">
<div class="image-wrapper">
<img src="https://source.unsplash.com/collection/190727/600x600" alt="Image of product added"/>
</div>
<div class="total-price">£12.99</div>
</div>
<div class="item">
<div class="image-wrapper">
<img src="https://source.unsplash.com/daily" alt="Image of product added"/>
</div>
<div class="total-price">£12.99</div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
.products-container{
display: flex;
align-items: center;
background-color: blue;
}
.products-container .item{
max-width: 30%;
max-height: 50%;
margin: 10px;
background-color: blueviolet;
}
img{
width: 100%;
height: auto;
}

Answer 2

There is a possible solution:
Setting the container height to auto, and manipulating the width. I also used align-self: flex-end to make sure everything is aligned to the bottom of the blue-box. Using proportional images will make it all of them the same height, after auto-resizing.
* {
box-sizing: border-box;
}
.products-container{
display: flex;
align-items: center;
background-color: blue;
}
.products-container .item{
width: 10%;
height: auto;
margin: 10px;
background-color: blueviolet;
align-self: flex-end;
}
.image-wrapper img{
max-width: 100%;
max-height: 100%;
}
<div class="content-section">
<div class="products-container">
<div class="item">
<div class="image-wrapper">
<img src="https://cdn-images.farfetch-contents.com/14/66/46/09/14664609_23855407_1000.jpg" alt="Image of product added" />
</div>
<div class="total-price">{{price}}
</div>
</div>
<div class="item">
<div class="image-wrapper">
<img src="https://images-na.ssl-images-amazon.com/images/I/41DIxdHUYCL._AC_UL1020_.jpg" alt="Image of product added" />
</div>
<div class="total-price">{{price}}
</div>
</div>
<div class="item">
<div class="image-wrapper">
<img src="https://assets.burberry.com/is/image/Burberryltd/2d6345e1d1fe0353ef7f95098c4d890c0a76ebb1.jpg?$BBY_V2_SL_1x1$&wid=2800&hei=2800" alt="Image of product added" />
</div>
<div class="total-price">{{price}}
</div>
</div>
</div>
</div>