左侧固定宽，右侧自适应(来源面试)

面试给我出了这样的一个自适应的问题，当时由于紧张和日常工作中没怎么弄过自适应的问题所以。。。有点悲惨。回来好好的想了一下，给出以下几种方法

//两个块元素
<div class="div1"></div>
<div class="div2"></div>

1. 方法一：利用浮动

<style type="text/css">
*{
    margin:0;
    padding:0;
}
.div1{
    float:left;
    width:200px;
    background:red;
}
.div2{
    background-color:green;
    margin-left:200px; /*==等于左边栏宽度==*/
}
</style>

查看demo

1. 方法2：浮动和负边距实现

<div id="left">
            Left Sidebar
    </div>
<div id="content">
    <div id="contentInner">
        Main Content
    </div>
</div>

    *{
            margin: 0;
            padding: 0;
        }
        #left {
            background-color: green;
            float: left;
            width: 220px;
            margin-right: -100%;
        }

        #content {
            float: left;
            width: 100%;
        }

        #contentInner {
            margin-left: 220px;/*==等于左边栏宽度值==*/
            background-color: orange;
        }

1. 方法三:flex布局

 <div id="left">
        <h1>Left Sidebar</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="content">
        <div id="contentInner">
            <h1>Main content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</div>

        .parent{
             display:flex;
         }

         *{
            margin: 0;
            padding: 0;
        }
        #left {
            background-color: green;
            width: 220px;
            min-width:220px;

        }

        #content {

            width: 100%;
        }

        #contentInner {

            background-color: orange;
        }

产生联想：如果是两侧不动中间动呢

首先就是 flex布局：
1：父节点flex 左右节点固定宽 中间flex =1;
2：两侧固定宽 中间margin-left等于左侧固定宽 margin-right等于右侧固定宽
3:float: 左侧固定宽 float：left 右侧固定宽：float：right；