Flexbox Responsive Images not shrinking

Question

I have a parent with flex column inside is an image and a div set to flex row with two more images inside. All the images are shrinking down as expected accept the two inside this specific div. I feel like I'm missing something simple to fix this issue but everything I've tired doesn't seem to work. I tired flex grow/shrink but that didn't seem work either.

CodePen Link: https://codepen.io/devi8/pen/JjVqagx/57046326fd092775246b47d5da9c4235

.comp__06 {
  max-width: 1720px;
  display: flex;
  flex-direction: column;
  padding: 25px;
  margin: 1rem auto;
  background: #fff;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}
.comp__06 img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.comp__06 .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}
.comp__06 .header * {
  margin: 0 0 1rem;
  padding: 0;
}
.comp__06 .header h2 {
  font-size: 2rem;
}
.comp__06 .header p {
  font-size: 1rem;
}

.comp__06 .content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 25px;
}

.comp__06 .column {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 1 1 auto;
}

.comp__06 .column .row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  gap: 25px;
  border: 1px solid red;
}

.comp__06 .content div:nth-child(1) {
  max-width: 630px;
  order: 1;
}
.comp__06 .content div:nth-child(2) {
  max-width: 630px;
  order: 2;
}
.comp__06 .content div:nth-child(3) {
  max-width: 360px;
  order: 3;
}

<section class="comp__06">
  <div class="header">
    <h2>This is a Featured Section Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  </div>
  <div class="content">
    <div class="column">
        <img src="https://place-hold.it/630x630">
    </div>
    
    <div class="column">
      <img src="https://place-hold.it/630x250">
      <div class="row">
        <img src="https://place-hold.it/302x355" width="302" height="355">
        <img src="https://place-hold.it/302x355" width="302" height="355">
      </div>
    </div>
    
    <div class="column">
      <img src="https://place-hold.it/360x630">
    </div>
  </div>
</section>

Answer 1

This is because you have set max-width: 100%; for all your imgs and then put 2 images inside a single flex item. The max-width: 100% means that each image can use up to 100% of the total width of that flex item. Which means that together the 2 images side by side can use 200% of the total width of the flex item.

You could solve this in a couple of ways:

Solution #1 - Nest the 2 images inside a new flex items

Instead of simply putting the 2 images next to each other, you can nest them inside divs, that will naturally fit the space horizontally. And then your max-width: 100% will simply set the images to fill that space instead.

So for example if you change:

    <img src="https://place-hold.it/302x355" width="302" height="355">
    <img src="https://place-hold.it/302x355" width="302" height="355">

to:

    <div><img src="https://place-hold.it/302x355" width="302" height="355"></div>
    <div><img src="https://place-hold.it/302x355" width="302" height="355"></div>

That will solve your problem.

Solution #2 - Set a calculated max-width on the 2 images that are side by side

Because you have a gap: 25px set that exists between those 2 images, simply setting the max-width to 50% for those 2 images won't quite solve your problem, because that won't account for the 25px gap, meaning the image can still overflow off the edge by 25px.

We can account for that by setting max-width: calc(50% - 12.5px) which will effectively calculate the total max width that each image is allowed to take up in that situation: 50% of the space, minus half the gap.

Example:

    <img src="https://place-hold.it/302x355" width="302" height="355" style="max-width: calc(50% - 12.5px);">
    <img src="https://place-hold.it/302x355" width="302" height="355" style="max-width: calc(50% - 12.5px);">

I hope having two options/examples will help you understand the situation better! :)