flex九宮格一點小思考

看到一道面試題，用flex布局九宮格，決定自己實現一下

基礎版

 .father {
            display: flex;
            /*必須給寬高把盒子撐起來，然后調整width可看是否要正方形*/
            width: 300px;
            height: 300px;
            flex-direction: column;
        }
        
        .mather {
            display: flex;
            flex: 1;
            flex-direction: row;
        }
        
        .son {
            flex: 1;
            border: 1px solid;
        }
         <div class="father">
        <div class="mather">
            <div class="son"></div>
            <div class="son"></div>
            <div class="son"></div>
        </div>
        <div class="mather">
            <div class="son"></div>
            <div class="son"></div>
            <div class="son"></div>
        </div>
        <div class="mather">
            <div class="son"></div>
            <div class="son"></div>
            <div class="son"></div>
        </div>
    </div>

效果如圖

可以看到 這里我是指定了父元素的寬高的，那么我想隨着屏幕變化我的寬高怎么辦？
思路：

• 先將father盒子賦予屏幕寬高，其余與上不變。

 <div class="father" id="father"></div>
        let HTML = document.documentElement,
            winW = HTML.clientWidth,
            winH = HTML.clientHeight,
            father = document.getElementById('father');
        console.log(winW, winH)
        father.style.width = winW+'px';
        father.style.height = winH+'px';

解決！
再定睛一看，旁邊仍有滾動條？

   .son{
    box-sizing:border-box;
}

豎直還是有！
a few moments latter...

• 搗鼓結果：
  我把瀏覽器窗口縮小后刷新就沒有了
  

電腦正常開啟瀏覽器高度仍有滾動條

原因：可能是我的可視高度並非我的屏幕高度
在我手動將瀏覽器寬高拉至占滿整個屏幕后刷新，滾動條又沒有了，此時可視高度與屏幕一致。
說明我電腦自動開啟瀏覽器時，瀏覽器高度略比電腦屏幕高，才會導致無法全部顯示。

瀏覽器普通窗口：

電腦桌面打開瀏覽器時瀏覽器全屏窗口：

這兩種方式高度相差5px左右，所以會導致有滾動條。

粗暴的解決辦法：

        /* //谷歌適用 */
        
         ::-webkit-scrollbar {
            display: none;
        }