JavaScript insert createElement till parent element is "full"

I've some wrapping element on my HTML page which has a relative width and height setting, to cover all of the available screen.

<body onload="init()">
    <div id="wrapper" class="choicebox" style="width:100%;height:100%;border:1px solid black">
    </div>
</body>

Next, I have Java Script which fills a fixed amount of new elements (SPAN boxes) in the wrapping DIV:

function init() {

        for (let i = 0; i < 200; i++) {
        insertBox("X")
        }
    }


function insertBox(currentValue, index, arr){
    var new_element = document.createElement('span')
    new_element.id = currentValue
    new_element.innerHTML = currentValue;
    new_element.classList.add('box');
    document.getElementById('wrapper').appendChild(new_element)
}

The CSS definition is the following:

.box {
    background: #8b95f1;
    padding: 20px;
    font-size:1.0em;
    display: inline-block;
}

This code is working. However, how can I create exactly the amount of necessary SPAN boxes inside the wrapping DIV till it is "full" (more elements inserted are not visible anymore without scrolling)?

Thanks for any hint.

Solution

Another answer, much simpler

Here I compare scrollHeight and offsetHeight, offsetHeight is the display height, scrollHeight is the actual overflow height, when offsetHeight >= scrollHeight, the wrapper is not filled

let wrapper = document.querySelector('#wrapper');

function init() {
  while (wrapper.scrollHeight < wrapper.offsetHeight) {
    insertBox("X");
  }
  wrapper.removeChild(wrapper.lastChild);
}


function insertBox(currentValue, index, arr) {
  var new_element = document.createElement('span')
  new_element.id = currentValue
  new_element.innerHTML = currentValue;
  new_element.classList.add('box');
  wrapper.appendChild(new_element)
}

.box {
  background: #8b95f1;
  padding: 20px;
  font-size: 1.0em;
  display: inline-block;
}

#wrapper {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  overflow: visible;
}

<body onload="init()">
  <div id="wrapper" class="choicebox" style="">
  </div>
</body>

I modified some css to make the wrapper have a max height