Images falling outside container with max height - html

Question

I have a container that contains 3 images. I want the image on the left to take up 100% of the container height, and the two on the right to take up 50% each and be stacked.
However when I set a max height on my gallery container of 400px, as the images are taller they fall out.
How can I fix this?
HTML
<div class="container">
<div class="gallery">
<div class="main-image">
<img src="https://via.placeholder.com/710x533" />
</div>
<div class="sub-image">
<img src="https://via.placeholder.com/357x266" />
<img src="https://via.placeholder.com/357x266" />
</div>
</div>
</div>
css
.container {
max-width: 1100px;
margin: 0px auto;
padding: 1rem;
}
.gallery {
display: flex;
flex-flow: row wrap;
max-height:400px;
border: 5px solid red;
};
.main-image {
img {
height: 100%;
}
flex: 1 0 66%;
min-height: 500px;
background-size: cover;
background-position: 50% 50%;
}
.sub-image {
flex: 1 0 33%;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
height: 100%;
};
I have the code in codepen
https://codepen.io/roynev123/pen/abWPQyw

Answer 1

You can achieve what you're looking for with the following CSS:
.container {
max-width: 1100px;
margin: 0px auto;
padding: 1rem;
}
.gallery {
border: 5px solid red;
display: flex;
justify-content: space-around;
max-height: 400px;
}
img {
display: block;
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
}
.main-image {
flex-shrink: 0;
width: 66.67%;
}
.sub-image img {
height: 50%;
}
Basically, .gallery acts a a flexbox container, with .main-image having a static width.