Script that change the width of multiple divs with the same class name

After gotten help from @michael-p who had made a script that works excellent, i was looking for some code that could work better in my situation (old topic link).

The "container" class or id (as shown below) displays flexbox content ("box") who go from top to bottom and when reaching the bottom makes another row to the right en start over.

This was a issue because as explained in my old topic, Chrome doesn't recognize the flexbox content and does not stretch the width.

Michael P solved this however through some scripting but the script was made for one "container" class (it freaks out when multiple divs has the same class name, because they have different amount of "box" classes inside it, so different widths).

What i would like to achieve:

A script (can be modified from Michael-P script) that focuses only in the div that its placed in, and stops when the div stops, so there would be no need to specify a certain class by name.

Doing so there would be no limit of how many div copies there could be with the same class name but different amount of "box" contents in it.

Fiddle from Michael P

<div id="container">  
    <div class="box">1</div>  
    <div class="box">2</div>  
    <div class="box">3</div>  
    <div class="box">4</div>  
    <div class="box">5</div>  
    <div class="box">6</div>  
    <div class="box">7</div>  
    <div class="box">8</div>  
    <div class="box">9</div>  
    <div class="box">10</div>  
    <div class="box">11</div>  
    <div class="box">12</div>  
    <div class="box">13</div>  
    maybe here the script? that stops when </div> is shown?
</div>

Script

// Find the biggest offset right
var maxOffsetRight = 0,
    currentOffsetRight;

$('#container').children().each(function(index) {
    currentOffsetRight = $(this).position().left + $(this).outerWidth(true);
if (currentOffsetRight > maxOffsetRight) {
    maxOffsetRight = currentOffsetRight;
}
});

$('#container').css('width', maxOffsetRight);