【JavaScript】ウィンドウサイズ変更時に要素のサイズを変更する

1<!-- サイズが静的な要素 -->
2<ul class="stable1" id="stable1">
3  <li><button type="button" >ボタン１</button></li>
4  <li><button type="button" >ボタン２</button></li>
5</ul>
6
7<table class="stable2" id="stable2">
8  <thead>
9    <tr><th>項目１</th><th>項目２</th></tr>
10  </thead>
11  <tbody>
12    <tr><td>値１</td><td>値２</td><tr>
13  </tbody>
14</table>
15
16<!-- サイズが動的な要素 -->
17<div class="active" id="active">
18  <img src="sample.png">
19</div>

1.active{
2	max-width: 60vw;
3	max-height: 65vh;
4	min-width: 300px;
5	min-height: 150px;
6	overflow: scroll;
7	}

1var resizeFlg;    //setTimeoutの待機中かを判定するフラグ
2
3function windowResizeFunc(){
4    
5    //resizeFlgに値が設定されている場合は、待ち時間中なのでリセットする
6    if (resizeFlg !== false) {
7        clearTimeout(resizeFlg);
8    }
9    //300ms待機後にリサイズ処理を実施する
10    resizeFlg = setTimeout( function() {
11        resizeElement();    //リサイズを実施する処理
12    }, 300);
13
14window.addEventListener("resize", windowResizeFunc);

1const windowWidth = document.documentElement.clientWidth;
2const windowHeight = document.documentElement.clientHeight;

1//要素を取得してから、幅と高さを取得
2let stable1 = document.getElementsById("stable1");
3const stable1Width = stable1.getBoundingClientRect().width;
4const stable1Height = stable1.getBoundingClientRect().height;
5
6//メソッドチェーンで要素の幅と高さを取得
7let stable2Width= document.getElementById("stable2")
8                          .getBoundingClientRect().width;
9let stable2Height= document.getElementById("stable2")
10                          .getBoundingClientRect().height;
11
12let active= document.getElementById("active");

1//要素を取得してから、幅と高さを取得
2let stable1 = document.getElementByClassName("stable1");
3const stable1Width = stable1[0].getBoundingClientRect().width;
4const stable1Height = stable1[0].getBoundingClientRect().height;
5
6//メソッドチェーンで要素の幅と高さを取得
7let stable2Width= document.getElementsByClassName("stable2")[0]
8                          .getBoundingClientRect().width;
9let stable2Height= document.getElementsByClassName("stable2")[0]
10                          .getBoundingClientRect().height;

1//要素のサイズ設定（"px"の付け忘れに注意！）
2active.style.width = ( windowWidth - stable1Width - stable2Width ) + "px";
3active.style.height = ( windowHeight - stable1Height - stable2Height ) + "px";