Putting three images side by side and fill the parent - html

Question

I want to have three images side by side with one condition I'm unable to reach without a little bit help:
.picture-container {
position: absolute;
top: 10%;
width: 90%;
height: 70%;
left: 5%;
border-style: dotted;
}
.picture-container .img-container.three-image {
justify-items: center;
height: 100%;
gap: 20px;
display: grid;
grid-template-columns: auto auto auto;
}
.picture-container .img-container.three-image * {
height: 298px;
}
.picture-container .img-container.three-image .img-frame {
width: 100%;
height: 42%;
object-fit: cover;
}
.img-frame {
display: flex;
border: 5px solid #e8e8e8;
box-shadow: 1px 7px 20px 9px rgb(0 0 0 / 75%);
margin: 3rem auto 3rem;
flex: 1 0 45%;
border-radius: 5px;
cursor: pointer;
margin: 0.4rem;
background: #dfe4ea;
user-select: none;
transition: 0.5s;
height: 100%;
object-fit: contain;
}
<div class="picture-container">
<div class="img-container three-image ">
<img class="img-frame" src="https://images.pexels.com/photos/4876243/pexels-photo-4876243.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img class="img-frame" src="https://images.pexels.com/photos/1386454/pexels-photo-1386454.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img class="img-frame" src="https://images.pexels.com/photos/9646282/pexels-photo-9646282.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
I want these images to :
fill the whole area of the picture-container parent. they should fill the width and the height of the picture-container.
All the images should have the same dimensions. I don't want to have different sizes of them.
Note that source of the each image has its own dimensions.
The images should not be Cropped and they can be stretched...
The frame should be intact...
How can I do this?

Answer 1

I couldn't get it to work without wrapping the images in a DIV and setting a width and height on the images themselves.
.img-container{display:flex;max-height:100vh}
.img-container div{flex-grow:1}
.img-frame{width:calc(100% - 29px - 0.4rem);height:calc(100% - 29px - 0.4rem)}
Example:
https://jsfiddle.net/540scey8/1/