Aligning images horizontally with respect to another image - html

Question

I am trying to align some pictures perfectly according to their height while maintaining their ability to scale. I have made a column layout using floats in CSS. There are three columns and have equal width so they scale equally but I can't seem to make the images have optimal height so they all fit in their containers with equal height. The images in my middle column are flowing out.
.section__banner-row {
max-width: 100%;
margin: 0 auto;
}
.section__banner-row:not(:last-child) {
margin-bottom: 1rem;
}
.section__banner-row::after {
content: "";
display: table;
clear: both;
}
.section__banner-row [class^="col-"] {
float: left;
}
.section__banner-row [class^="col-"]:not(:last-child) {
margin-right: 1rem;
}
.section__banner-row .col-1-of-2 {
width: calc((99.9% - 1rem) / 2);
}
.section__banner-row .col-1-of-3 {
width: calc((99.9% - 2 * 1rem) / 3);
}
.section__inside-banner {
margin-top: 1rem;
}
.container-shadow-box {
position: relative;
overflow: hidden;
}
.container-shadow-box img {
width: 100%;
display: block;
transition: all 0.5s;
}
.container-shadow-box:hover img {
transform: scale(1.11);
}
<div class="section__banner-row">
<div class="col-1-of-3">
<div class="container-shadow-box">
<img src="https://i.ibb.co/FhQFN40/blog-masonry-01.jpg" alt="Masonry 1">
</div>
</div>
<div class="col-1-of-3">
<div class="container-shadow-box">
<img src="https://i.ibb.co/0JHHwbm/blog-masonry-02.jpg" alt="Masonry 2">
</div>
<div class="section__inside-banner">
<div class="col-1-of-2">
<div class="container-shadow-box">
<img src="https://i.ibb.co/NycZ9KN/blog-masonry-03.jpg" alt="Masonry 3">
</div>
</div>
<div class="col-1-of-2">
<div class="container-shadow-box">
<img src="https://i.ibb.co/qRNZm1q/blog-masonry-04.jpg" alt="Masonry 4">
</div>
</div>
</div>
</div>
<div class="col-1-of-3">
<div class="container-shadow-box">
<img src="https://i.ibb.co/PmcznpR/blog-masonry-05.jpg" alt="Masonry 5">
</div>
</div>
</div>

Answer 1

Flexbox example:
body * {
box-sizing: border-box;
}
.grid-box {
padding-bottom: 28%; /* adjust this for container aspect ratio */
height: 0;
position: relative;
background: pink;
}
.section__banner-row {
display: flex;
}
.section__banner-row.outer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 5px;
}
.section__banner-row .col {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
}
.section__banner-row .col > div {
flex-basis: 50%;
flex-grow: 1;
}
.container-shadow-box {
margin: 10px;
height: 100%;
background: #ddd;
}
.container-shadow-box>div {
background-size: cover;
height: 100%;
}
<div class="grid-box">
<div class="section__banner-row outer">
<div class="col">
<div class="container-shadow-box">
<div style="background-image: url(https://i.ibb.co/FhQFN40/blog-masonry-01.jpg);"></div>
</div>
</div>
<div class="col">
<div class="container-shadow-box">
<div style="background-image: url(https://i.ibb.co/0JHHwbm/blog-masonry-02.jpg);"></div>
</div>
<div class="section__banner-row">
<div class="col">
<div class="container-shadow-box">
<div style="background-image: url(https://i.ibb.co/NycZ9KN/blog-masonry-03.jpg);"></div>
</div>
</div>
<div class="col">
<div class="container-shadow-box">
<div style="background-image: url(https://i.ibb.co/qRNZm1q/blog-masonry-04.jpg);"></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="container-shadow-box">
<div style="background-image: url(https://i.ibb.co/PmcznpR/blog-masonry-05.jpg);"></div>
</div>
</div>
</div>
</div>
Fiddle demo
Does my browser support flexbox?