css3 flex: why img take more width than contains? - html

Question

Why .itm in this case take width 400px instead of 160px? In other cases div take same width like child, but when img is bigger and browser scale it - I got empty space
How to fix it? I fount only one way: set <img height="..." width="..." />, but I want more more suitable way because I don't know real image size.
.box {
display: flex;
}
.box .itm {
max-height: 400px;
max-width: 400px;
background: red;
margin-right: 10px;
}
.box .itm img {
max-height: 100%;
max-width: 100%;
}
.box .itm .tst {
width: 160px;
height: 400px;
background: lime;
}
<div class="box">
<div class="itm">
<img src="https://picsum.photos/300/750"/>
</div>
<div class="itm">
<div class="tst">same block with 160x400 sime like img</div>
</div>
</div>

Answer 1

Problem
As the flex items do not have width or flex-basis properties defined, flex container space distributed as first element will take the max-width size, and the second item will take the remaining space.
Solution
Add width and flex-basis properties to flex items

Answer 2

I didn't understand why this is happening
I fixed this by moving the max-width directly to each image. In my case, this solves the problem, but it would not help if there was not only a picture but also other content in the container.
.box {
display: flex;
}
.box .itm {
display: flex;
background: red;
margin-right: 10px;
}
.box .itm img {
max-height: 400px;
max-width: 400px;
}
.box .itm .tst {
width: 160px;
height: 400px;
background: lime;
}
<div class="box">
<div class="itm">
<img src="https://picsum.photos/300/750"/>
</div>
<div class="itm">
<div class="tst">same block with 160x400 sime like img</div>
</div>
</div>