Images in a flexbox doesn't scale properly - html

Question

I put 2 images inside a flexbox with column direction and I want images to resize when I resize a browser window. They don't change as I expect.
I want images to change in their original ratio, but no matter what css style I use it fails.
It works fine when I resize a window horizontally buy not when I resize it vertically.
Additionally images go outside of the flexbox div, how can I prevent it?
#box{
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
width: 50%;
height: 30%;
background-color: red;
}
#photo {
width: 100%;
height: auto;
}
<div id="box">
<div id="container">
<img id="photo" src="1.JPG">
<img id="photo" src="2.JPG">
</div>
</div>

Answer 1

One think i normally use in this scenarios is set the image as background image using css an use background-size:contain;
An example:
#box{
width: 100vw;
height: 100vh;
}
#container {
display: flex;
flex-direction: column;
width: 50%;
height: 30%;
background-color: red;
}
.photo {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size:contain;
}
<div id="box">
<div id="container">
<div class="photo" style="background-image: url('https://picsum.photos/200/300/?random')"></div>
<div class="photo" style="background-image: url('https://picsum.photos/300/200/?random')"></div>
</div>
</div>
https://jsfiddle.net/vbanj8st/