Image exceeds flex parent size [duplicate] - html

Question

This question already has answers here:
flex child is growing out of parent
(3 answers)
Closed 4 years ago.
I am having an issue with making <img> flexible inside a flex parent. Image start exceeding parent dimensions. I would like to leave parent with display: flex; and restrict image from crossing parent's dimensions.
.full
{
width: 400px;
height: 200px;
background-color: blue;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.half
{
width: 50%;
background-color: red;
padding: 20px;
}
img
{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class="full">
<div class="half">
<h1>title</h1>
<img src="http://placehold.it/90x200">
</div>
</div>
Can you please explain and give some useful links that would explain the shown behavior and possible solution of it?
I am using both Firefox and Chrome to view that. Issue persist in both browsers.
It seems that question is duplicate of this question

Answer 1

In order for it to work .half div also needs to be a flexbox container and the image needs to have min-height: 0, as explained here.
.full
{
width: 400px;
height: 200px;
background-color: blue;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.half
{
width: 50%;
background-color: red;
padding: 20px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
}
img
{
min-height: 0;
max-width: 100%;
max-height: 100%;
}
<div class="full">
<div class="half">
<h1>title</h1>
<img src="http://placehold.it/90x200">
</div>
</div>