I've encountered a puzzling issue with my inherited markup. The width is defined on the outermost div and then inherited by each child div, creating a dynamic width scenario.
The challenge I face is aligning the pink wrapper div to match the exact width of the row of blue boxes in the first row, without knowing the number or widths of the blue boxes beforehand.
My aim is to center the pink wrapper within the red/green divs and have the blue boxes left-aligned. Despite two attempts, I haven't been successful. Any assistance would be greatly appreciated.
You can view the desired outcome in this image: https://i.sstatic.net/xtOxA.png
.outer {
width: 275px;
border: 4px solid red;
}
.parent-wrap {
border: 3px solid green;
}
.wrapper {
background: pink;
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.box {
width: 50px;
height: 50px;
background: blue;
display: inline-block;
margin: 5px;
}
/* Attempt 2*/
.outer2 {
width: 275px;
border: 4px solid red;
}
.parent-wrap2 {
border: 3px solid green;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.wrapper2 {
background: pink;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box2 {
width: 50px;
height: 50px;
background: blue;
display: inline-block;
margin: 5px;
}<h2>Attempt #1</h2>
<div class="outer">
<div class="parent-wrap">
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
<h2>Attempt #2</h2>
<div class="outer2">
<div class="parent-wrap2">
<div class="wrapper2">
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
</div>
</div>
</div>