I tried searching and could not find an exact similar question, so posting it here.So I have a few block divs inside a flex wrapper with row wrapping, and I want to have a border for the wrapper. The issue I'm running into is that the border will always span 100% of the viewport, instead of being reduced to fit only the items. How can I achieve this without using media queries or JS? I would prefer solutions with inline styles as that's the most preferable in this scenario.
Code samples:Basic code for my blocks:
<div id="w1" class=wrapper style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; border: 3px solid #000"> <!-- wrapper OPEN --><div id="b1" class="block" style="width: 250px;"></div> . . .<div id="b9" class="block" style="width: 250px;"></div></div><!-- wrapper CLOSE -->
So basically, this border should be here:
I tried a solution to add another wrapper outside with display:table but it only works when all blocks are on the same row; when blocks wrap to the next row; it again takes up the entire width.
<div id="w0" class=outer style="display:table; margin:auto; border: 3px solid #000;"><!-- border wrapper OPEN --><div id="w1" class=wrapper style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px;"><!-- flex wrapper OPEN --><div id="b1" class="block" style="width: 250px;"></div> . . .<div id="b9" class="block" style="width: 250px;"></div></div><!-- flex wrapper CLOSE --></div><!-- border wrapper CLOSE -->Thank you.