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>
2
Answers
I was able to make this work by first changing this:
to this:
and then also adding this:
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!
This is because you have set
max-width: 100%;
for all yourimg
s and then put 2 images inside a single flex item. Themax-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:
to:
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 themax-width
to50%
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:
I hope having two options/examples will help you understand the situation better! 🙂