Javascript 如何使多个 div 动态占用 100% 的行宽

var split_button = document.querySelector(".btn");
split_button.addEventListener("click", myfunc);

function myfunc() {
  number = parseInt(document.querySelector("#number").value);
  split = parseInt(document.querySelector("#split").value);
  var displayDiv = document.getElementById("disp");
  displayDiv.innerHTML = "";
  if (split > number) {
    generateErrorMessage(
      "Please enter number of splits less than number itself!"
    );
  } else if (number > 100 || number < 1) {
    generateErrorMessage(
      "Please enter number greater than 0 and less than 101"
    );
  } else if (split == 0) {
    generateErrorMessage("Split can't be done null");
  } else {
    let n = split;
    for (var i = 0; i < split; i++) {
      if (number % n == 0) {
        var divWidth = number / n;
      } else {
        var divWidth = Math.floor(number / n) + 1;
      }

      let tag = document.createElement("div");
      tag.className = "fill";

      var randomcolor = getRandomColor();
      tag.style.backgroundColor = randomcolor;
      tag.style.width = divWidth + "%";
      tag.textContent = divWidth;
      displayDiv.appendChild(tag);
      number = number - divWidth;
      n = n - 1;
    }
  }
}

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function generateErrorMessage(msg) {
  errdiv = document.querySelector(".err-div");
  errpara = document.createElement("p");
  errpara.textContent = msg;
  errdiv.appendChild(errpara);
  errdiv.classList.add("err-msgs");
  console.log(errdiv);
  setTimeout(() => {
    errdiv.innerHTML = "";
    errdiv.classList.remove("err-msgs");
  }, 5000);
}

.container {
    background-color: white;
    padding-top: 10px;
}

body {
    background-color: lightblue;
}

.num {
    margin-bottom: 10px;
}

button {
    margin-left: 10px;
}

.disp {
    background-color: whitesmoke;

}

.fill {
    display: inline-block;
    background-color: aqua;
    /* border: 2px solid black; */
    height: 100px;
    text-align: center;
    color: white;
    font-size: 50px;
    /* padding: 10px; */

}

.err-msgs {

    padding: 20px;
    background-color: pink;
}

 <div class="container my-5">
      <!-- <p>Sorry there was an error</p> -->
        <div class="err-div"></div>  
        <div class="form-group p-2">
          <label for="number" class="num">Enter a Number</label>
          <input type="number" class="form-control" id="number" />
        </div>
        <div class="form-group p-2">
          <label for="split" class="num"
            >Enter number of times you want to split</label
          >
          <input type="number" class="form-control" id="split" />
        </div>

        <button  class="btn btn-primary my-2">Split</button>
      

      <div id="disp"></div>
  </div>