flex两列布局，左边固定（可折叠），右边自适应

需求：左边导航栏固定宽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;