请教用JavaScript如何做到根据个数生成大小相同的div，然后这些div要正好在一个大盒子中排的整齐

需求：
通过js或者JQ实现输入不同的个数，根据个数计算出一个div合理的宽和高，然后生成相应个数的div，然后添加到大盒子中、整齐的排布。按照一定间距铺满大盒子。
div的宽和高根据个数动态计算。

预期效果：
个数为90时：

img

个数为其他时，也自适应铺满，不同的个数，宽高是不同的。

现阶段：现在根据我的思路可以实现某一个数量的div是合理的铺满的，但无法自适应其他数量的铺满

我尝试过的方法：
使用大盒子面积除以个数，求得一个div的面积，再通过一些运算（不知道怎么运算）计算出合理的宽高。

现阶段代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <div class="home" id="home">
            <div class="title">
                
            </div>
            <div class="content">
                
            </div>
        </div>
    </body>
    <script src="js/my.js" type="text/javascript" charset="utf-8"></script>
</html>

html,
body {
    /* border: 1px solid red; */
    height: 100%;
}
.home {
    height: 100%;
    border: 1px solid red;
}
.home .title{
    height: 15%;border: 1px solid red;
}
.home .content{
    padding: 5px;
    height: 85%;border: 1px solid red;
}
.box{
    margin: 5px;
    border:1px solid #ff5500;
}

$(function(){
    var h=$('.content').height();   //区域高度
    var w=$('.content').width();    //区域宽度
    console.log(h)
    console.log(w)
    var n=90;    //box个数
    var area=w*h;  //区域面积
    var boxarea=parseInt(area/n);   //box面积
    var boxw=parseInt(Math.sqrt(boxarea))-22;    //box宽
    var boxh=parseInt(Math.sqrt(boxarea))-2;    //box高
    var box='';
    console.log(boxarea)
    console.log(boxw)
    for (var i = 0; i < n; i++) {
        box+='<div class="box" style="width:'+boxw+'px;height:'+boxh+'px;display:inline-block;"></div>';
    }
    $('.content').html(box);
})


#mainDOM {
            height: 500px;
            width: 600px;
            border: 1px solid blue;
            display: flex;
            flex-wrap: wrap;
        }
        .subDiv {
            background-color: cadetblue;
            margin: 5px;
        }

<input type="text" id="inputDOM" />
    <button onclick="showDiv()">点我</button>
    <div id="mainDOM"></div>



//输入任意一个数字，返回它的最大质因数
function myMaxPrimeFactors(num) {
    if(num <= 0) {
        console.log('Plese input a positive integer!');
        return;
    }
    var factor = 2;
    var lastFactor = 1;
    while(num > 1) {
        if(num % factor == 0) {
            lastFactor = factor;
            num = num / factor;
        } else {
            factor = factor + 1;
        }
    }
    return lastFactor;
}

function showDiv() {
    let inputDOM = document.getElementById('inputDOM')
    let val = inputDOM.value
    let widthNum = myMaxPrimeFactors(parseInt(val)) //横向div的个数
    let heightNum = parseInt(val) / widthNum //纵向div的个数
    
    let mainDOM = document.getElementById('mainDOM') //获取被填充的div
    let widthInput = mainDOM.clientWidth
    let heightInput = mainDOM.clientHeight

    //移出已经添加完成的子div
    let allChildren = mainDOM.childNodes
    let index = allChildren.length
    while(index>0) {
        index--
        mainDOM.removeChild(allChildren[index])
    }

    //生成新的div加入
    for (let i = 0; i < heightNum; i++) {
        for (let j = 0; j < widthNum; j++) {
            let subDiv = document.createElement('div')
            subDiv.setAttribute('class','subDiv')
            subDiv.style.width = widthInput / widthNum - 10 + 'px'
            subDiv.style.height = heightInput / heightNum - 10 + 'px'
            mainDOM.appendChild(subDiv)
        }
        
    }

}