两栏布局之右边固定左边自适应

两栏布局是咱们在项目中经常遇到的一种布局方式，在这里记录一下两栏布局之右边固定，左边自适应的布局方式。

首先给定2个div盒子。

<div id="app">
   <div class="left"></div>
    <div class="right"></div>
</div>

1、flex布局，我比较喜欢采用的一种，简单粗暴，但是flex可能存在兼容性问题，如果是手机端就可以放心使用。首先设置display: flex，让2个盒子一行显示，设置右边的固定宽度···px，然后设置左边flex：1，自动填满剩余空间。

<style>
        /* 右边固定 左边自适应 */
        body{
            margin: 0;
            padding: 0;
        }
        #app{
            width: 100vw;
            height: 100px;
            display: flex;
        }
        .right{
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        .left{
            flex: 1;
            height: 100px;
            background-color: black;
        }
    </style>

2、利用定位+overflow使用。首先设置右边盒子position：absolute(或者fixed)，由于这种定位形式会脱离标准流，那么设置左边盒子overflow：hidden，就可以达到目的了。

/* 右边固定左边自适应 */
        body{
            margin: 0;
            padding: 0;
        }
        #app{
            width: 100vw;
            height: 100px;
        }
        .right{
            position: fixed;
            width: 200px;
            height: 100px;
            right: 0;
            top: 0;
            background-color: blue;
        }
        .left{
            height: 100px;
            overflow: hidden;
            background-color: black;
        }

关于两栏布局右边固定左边自适应的布局方法还有很多种，在此只记录我用的比较多的情况。