自适应

左右两列布局：父元素display: flex;一个子元素固定宽度，另外一个自适应flex-glow:1。或者两个都自适应。 自适应：瓜分父元素剩下的大小。

    #contain{
    width: 100%;
    height: 200px;
    display: flex;
    }

    #div1{
    height: 100px;
    background: pink;
    width: 100px;
}

    #div2{
    height: 100px;
    background:blue;
    flex-grow: 1
}

若三列布局，左右固定宽度，中间自适应，则加上

    #div3{
    height: 100px;
    width: 100px;
    background: red;
 
} 

或者另外一个写法：

    #contain{
    width: 100%;
    height: 200px;
    display: flex;
    }

    #div1{
    height: 200px;
    background: pink;
    flex:0 0 200px;
}

    #div2{
    height: 100px;
    background:blue;
    flex:auto;
}

    #div3{
    height: 200px;
    flex:0 0 200px;
    background: yellow;
    flex:0 0 200px;
 
} 

若垂直方向，上下固定，中间自适应。

    #contain{
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: column;
    }

    #div1{
    height: 200px;
    background: pink;
    width: 100px;
}

    #div2{
    height: 100px;
    background:blue;
    flex-grow: 1
}

    #div3{
    height: 200px;
    width: 100px;
    background: red;
 
} 

或者另外一种：

    *{
        margin:0;
        padding:0;
    }
html{
        height: 100%;}
body{
        height: 100%;
    }
#contain{
    width: 100%;
    height:100%;
    position: relative;
   overflow: hidden;
    }

#div1{
    height: 200px;
    width: 100%;
    background: pink;
    position: absolute;
    left:0;
    top:0;
    
}
#div2{
    background:blue;
    position: absolute;
    top:200px;
    bottom:200px;

}

#div3{
    width: 100%;
    height: 200px;
    background: yellow;
    position: absolute;
    left:0;
    bottom: 0;

}