需求：左邊導航欄固定寬200px，並且導航欄可摺疊隱藏，右邊自適應，填充剩餘的寬度.
html:

<div class="body">
        <div class="sidebar">
            <div class="bar" id='bar'>
                bar
            </div>
            <button id="btn" class="toglebtn">toggle</button>
        </div>
        <div
 
 class="main">main</div>
    </div>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.body {
    display: flex;
    width: 100%;
    height: 100vh;
    background-color: #ededed;
    border: 3px solid darkblue;

}

.sidebar {
     position: relative;
     display: inline-block
 
;
     height: 100%;
}

.bar {
     width: 200px;
     height: 100%;
     background-color: yellow;
     border: 3px solid red;
}

.toglebtn {
     position: absolute;
     top: 200px;
     left: 100%;
}

.main {
    color: white;
    display: inline-block;
    width: 100%;
    background-color: blue;
    border
 
: 3px solid red;
}

js

var btn = document.getElementById('btn');
var bar = document.getElementById('bar');

btn.addEventListener('click', function () {
     var display = bar.style.display;
     if (display != 'none') {
         bar.style.display = 'none';
     } else {
         bar.style.display = 'block';
     }
}, false)

效果圖，隨著瀏覽器視區的變化，右邊main的寬度不斷變化，並且，左邊導航欄的隱藏，main也會發生變化

flex屬性是彈性佈局，當body的佈局為彈性佈局時，則當main的寬度當小於剩餘寬度，則為實際寬度，大於等於剩餘寬度，則為剩餘寬度；
例如：剩餘寬度為800px,main的實際寬度為600px,則渲染出來的寬度為600px,但是當縮小視區的寬度為500px時，這時渲染的main的實際寬度為500px;