Как уменьшить два изображения в общем контейнере
Есть два изображения. Каждое в своем блоке. Эти блоки в свою очередь находятся в общем контейнере. У изображений max-width 100%. При уменьшении контейнера, а именно достижении границ одного из блоков он начинает уменьшаться. При этом второе не изменяется в размере. И только когда контейнер уменьшить настолько что его граница достигнет границ второго блока, он тоже начинает уменьшаться. А первый блок в это время почти исчез из-за уменьшения. Так вот. Есть ли способ чтобы не зависимо какой из двух блоков затронет уменьшение контейнера , они уменьшались одновременно и пропорционально. Знаю что это возможно сделать на гридах, а также заданием блокам размеров в процентах от контейнера. Но думаю это не единственный способ. Спасибо.
Вот примерный образец: https://codepen.io/S-VR/pen/xxPmyLW?editors=1100
.container {
display: flex;
max-width: 800px;
min-height: 400px;
margin: 3rem auto;
border: 5px solid orange;
}
.photos{
position: relative;
flex: 1 1 50%;
}
.text{
padding: 1rem;
flex: 1 0 50%;
}
.photo1, .photo2 {
position: absolute;
max-width: 150px;
}
img{
max-width: 100%;
}
.photo1{
right: 0;
}
.photo2{
right: 100px;
bottom: 50px;
} <div class="container">
<div class="photos">
<div class="photo1">
<img src=https://images.pexels.com/photos/8533749/pexels-photo-8533749.jpeg?cs=srgb&dl=pexels-anna-nekrashevich-8533749.jpg&fm=jpg style="">
</div>
<div class="photo2">
<img src="https://images.pexels.com/photos/7981660/pexels-photo-7981660.jpeg?cs=srgb&dl=pexels-mateusz-taciak-7981660.jpg&fm=jpg">
</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur vel labore maiores ex itaque distinctio, neque dolorem vitae voluptatum consequatur! Quisquam amet itaque inventore quo nulla doloremque soluta pariatur voluptate harum alias porro vitae quod accusantium minima officia, debitis nemo fugiat et odit deserunt unde? Soluta neque ullam, quasi iusto rerum cumque debitis eius voluptas! Accusamus, laborum dolorum esse asperiores aliquam nesciunt officiis distinctio similique, et qui soluta optio error reprehenderit iure quam, praesentium molestias cumque sunt porro dicta quaerat fugit. Accusamus molestiae libero nulla! Molestiae eligendi atque ad quisquam magnam beatae, cumque unde laboriosam reiciendis perspiciatis reprehenderit fugiat maxime.
</div>
</div>