Html Question posted in
Some basic documentation can be found here.

Html – Flexbox Responsive Images not shrinking

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.

enter image description here

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

2

Answers


  1. 0

    I was able to make this work by first changing this:

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

    to this:

    .comp__06 .column .row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  border: 1px solid red;
  justify-content: space-between;
}

    and then also adding this:

    .comp__06 .column .row img {
  max-width: 48%;
  max-height: auto;
}

    The gap of 25px was shifting the images out of the container which is why I removed. I set a fixed width and an auto height to allow them to grow and shrink.

    Justify-content: space-between; allowed them to have space in the middle of the two items..

    Hope this helps!

    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search