When placing 2 images inside a flexbox with the column direction, I anticipated that the images would resize accordingly when adjusting browser window size. However, this is not the case.
Regardless of the CSS styles applied, I am unable to maintain the original ratio of the images as desired.
Although resizing the window horizontally works as intended, vertical adjustments do not trigger the expected image response.
In addition, the images extend outside of the flexbox div area. How can I prevent this from happening?
#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>