左边定宽右边自适应

方法一

#left{
    /*background-color: aqua;*/
   width: 300px;
   float: left;
}
#right{
    /*background-color: brown;*/
    margin-left: 300px;
}

flexbox

主要是利用子元素的伸缩属性，0代表不伸缩，1代表自由伸缩

#container{
    display: flex;
}

#left{
    background-color: aqua;
    flex: 0 0 300px;
}
#right{
    background-color: brown;
    flex: auto;
}

calc

#left{
    background-color: aqua;
    width: 300px;
    float: left;
}
#right{
    background-color: brown;
    width: calc( 100% - 300px);
    float: left;
}