how to change the grid size in the same total space? is it the loop approach that’s making it not work?

const html = document.querySelector("html");
const body = document.querySelector("body");
const mainContainer = document.querySelector(".main-container");

html.style.margin = "0px";
html.style.padding = "0px";

body.style.margin = "0px";
body.style.padding = "0px";

mainContainer.style.width = "400px";
mainContainer.style.height = "400px";

for (s = 0; s < 16; s++) {
  const firstColumn = document.createElement("div");
  firstColumn.style.display = "flex";

  mainContainer.appendChild(firstColumn);
  for (i = 0; i < 16; i++) {
    const tinySquare = document.createElement("div");
    tinySquare.className = "tiny-square";
    tinySquare.style.height = "20px";
    tinySquare.style.width = "20px";
    tinySquare.style.border = "solid 2px black";
    firstColumn.appendChild(tinySquare);
    tinySquare.addEventListener("mouseover", () => (tinySquare.style.backgroundColor = "red"));
  }

}

<div class="main-container"></div>

i tried turning firstColumn into a flex but still didnt work and no matter how much i fix the mainContainer’s width and height it still gets out of it

i want to make a button to choose a fixed amount of squares in the grid (16×16, 32×32… etc).So im expecting the user to change the (i < 16) and (s < 16) values

changing the (i < 16) value works well by increasing the squares but still takes the same amount of pixels. firstColumn on the other hand keeps increasing vertically outside the container