How to dynamically change the width of a DIV?

Question

HTML

Tell me how you can dynamically change the width of a DIV depending on how many DIVs with a fixed width are nested in it? For example: the width of the main div is 8500 - 10 DIVs of 800px each are nested in it, plus 50 for padding. Nested DIVs line up horizontally. The bottom line is that there would be no extra scrolling, for example, when nested DIVs are not 10 but 5

Answer 1

Well, there aren't many options here. Wrap/replace everything with a table, or javascript set the width of the parent. You can also try with

#parent{white-space:nowrap;}
.child{display:inline-block;}

with all the consequences, but physically your posts will not stretch the container.
In my opinion the easiest way to do this is:

$(function(){
  var w = 0;
  $(".child").each(function(){
    w += $(this).width();
  });
  $("#parent").width(w);
});

Answer 2

So the main block is automatically stretched. And no scrolling - it stretches across the width of the window, and the rest is transferred to the next line.
narod.ru/disk/475247001/ololo.html.html