Not getting the correct width Jquery

Question

I have a div that is dynamically populated with other divs of various widths, and i need to get the total width of all inside 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 the JS

    <script>
   var totalWidth = 0;

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

But for some reason it only gives me the right width for the box divs which are narrower then the body but anything wider then the body returns the same width as the body if you could help me with that i would appreciate it.

Answer 1

You have added * { max-width: 100%; } or something like that in .box parent elements. So it doesn't allow widths greater than body's width. Check the screenshots: