How to set the width of the DIV block calculated from the width of the browser window?

Question

JavaScript

I have the following:
CSS (in a separate file):

.vneshniy_blok{
  width: 100%;
  height: 100%;
  background: yellow;
}

.vnutrenniy_blok{
  width: auto;
  height: auto;
  background: blue;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.blok{
  width: 150px;
  height: 100px;
  background: white;
  float: left;
}

HTML:

<div class="vneshniy_blok">
<div class="vnutrenniy_blok">
   <div class="blok">1</div>
   <div class="blok">2</div>
   <div class="blok">3</div>
   ......
   <div class="blok">100</div>
</div>
</div>

The width of the vnutrenniy_blok block is automatically stretched to full screen along the width of vneshniy_blok , but
it must be the width of the block blocks that fit in the line and be centered on vneshniy_blok .
how to set the width for the vnutrenniy_blok block depending on the width of the screen, relative to a multiple of 150 px, but adding to the width up to 10px.
I will explain:
if the screen width is 450px, then the width of the vnutrenniy_blok block is 450px,
if the screen width is 480px, then the width of the vnutrenniy_blok block is 460px,
if the screen width is 330px, then the width of the vnutrenniy_blok block is 310px,
if the screen width is 440px, then the width of the vnutrenniy_blok block is 310px,
if the screen width is 458px, then the width of the vnutrenniy_blok block is 458px,
if the screen width is 309px, then the width of the vnutrenniy_blok block is 309px.
like the essence stated, I hope it is clear
how to implement it in JavaScript?

Answer 1

I love, of course, logical (and not so) puzzles, but even the condition is somehow strange.

function ost(el) {
  var ok = el%150;
  if(ok==0){
    return el;
  }else {
    return (el - ok + 10);
  }
}

run through all the divs of the desired container, you need to give your number of pixels to the input of the function (which is higher) and throw the result into .style.width

var vse_divi = document.getElementsByClassName('blok');
    var nadow = ost(window.innerWidth);
    for (var i = 0; i < vse_divi.length; i++) {
      vse_divi[i].setAttribute("style" , "width:" + nadow + "px");
    }

If I understand the dependencies correctly.
Well, in general, it’s better to think of such tasks yourself, they give good knowledge on arrays, enumeration, etc.