Not getting the correct jquery width

Question

I have a div that is dynamically filled with other divs of different widths and I need to get the full width of all inside the divs, here is some code

    <div class="inner_wrpr">
    <div class="box>
    ...some content...
    </box>
    <div class="box>
    ...some content...
    </box>
    <div class="box>
    ...some content...
    </box>
    <div class="box>
    ...some content...
    </box>
    </div>

And here is JS

    <script>
   var totalWidth = 0;

   $('.box').each(function() {
      totalWidth += ($(this).outerWidth(true));
   });
   $('.inner_wrpr').css({'width': totalWidth});
   </script>

But for some reason, it gives me only the right width for div boxes that are narrower than the body, but something wider than the body returns the same width as the body, if you could help me with this, I was would appreciate it.

Answer 1

You added * {max-width: 100%; } or something similar in the parent .box elements. Thus, the width of the width does not exceed the width of the body. Check out the screenshots: