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.

Screenshot

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

CSS:

.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;
}

HTML

<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>