六種簡單方案實現左固定，右邊自適應。

html程式碼如下，只是CSS不同：

<div class="wrap" >
        <div class="left">左邊寬度固定，高度不定</div>
        <div class="right">右邊自適應，高度不定</div>
    </div>

1.左右子元素均設定inline-block

<style>
 .wrap{
    font-size:0px;/*通過設定父元素字型大小為0；來消除div之間的空格。或者通過註釋,<div>wwww</div><!--  --><div> wwww</div>*/
 

    padding: 20px;
    border:2px dashed red;
    box-sizing: content-box;/*父元素是content-box模式*，為了計算右側盒子的寬度，我們把子元素設定為border-box模式，這樣寬度就是整個盒子的寬度了。*/
 }

 .left{
    box-sizing: border-box;
    display:inline-block;/*兩個子元素都設定為inline-block*/
     vertical-align: top; /*兩個inline-block的盒子，必須兩個子元素都頂端對齊。*/
    background
 
: green;
    width:200px;
    height:500px;
    border:1px solid yellow;
     }


 .right{
    box-sizing: border-box;
    display:inline-block;
     vertical-align: top; 
    width:-webkit-calc(100% - 200px);/*減號前後要有空格，否則無效，減去的寬度必須計算清楚*/
    height:200px;
    background: yellow;
    border:1px solid pink;

     }
 

    </style>

2左右子元素均設定float

<style>
     .wrap{
      box-sizing: content-box;
      border:2px dashed red;
      overflow: auto;/* 父元素清除浮動*/
     }
     .left{
        float:left;
        box-sizing: border-box;
        width:200px;
        background: yellow;
     }
     .right{
        float:left;
        box-sizing: border-box;
        width:calc(100% - 200px);
        background: pink;
     }
    </style>

3左邊float,右邊margin-left

<style>
     .wrap{
      overflow:hidden;/*父元素清除浮動*/
      border:2px dashed red;

     }
     .left{
        float:left;
        width:200px;
        background: yellow;
     }
     .right{
        background: pink;
        margin-left: 200px;/*不設定寬度，利用block元素的寬度填滿父容器，並隨著父容器的寬度自適應的流動特性。
        block級別的元素會認為浮動的元素不存在，但是inline級別的元素能識別到浮動的元素。*/
     }

4左邊absolute,右邊margin-left

<style>
     .wrap{
      position :relative;
      border:2px dashed red;
      min-height:300px;/*當左側盒子的高度>右側時，會超出父容器高度，所以要給父元素設定最小高度。*/

     }
     .left{
       position: absolute;
        width:200px;
        height:300px;
        background: yellow;
     }
     .right{
        background: pink;
        margin-left: 200px;
        height:300px; /*高度是內容撐開，也可以自己設定。*/
         /*不設定寬度，利用block元素的寬度填滿父容器，並隨著父容器的寬度自適應的流動特性。
        block級別的元素會認為浮動的元素不存在，但是inline級別的元素能識別到浮動的元素。*/
     }

5左邊float,右邊BFC

<style>
     .wrap{
      overflow: auto;/*清除浮動*/
      border:1px dashed red;

     }
     .left{
      float:left;
      width:200px;/*固定寬度200px*/
      background: red;
     }
     .right{
     background: yellow;
     overflow: auto;/*形成BFC，此時不會與左邊盒子重疊，代替了margin-left的作用。*/

     }

6父元素 flex

<style>
     .wrap{
      display:flex;
      align-items: flex-start;/*頂部對齊*/
      border:1px dashed red;

     }
     .left{
      width:200px;
      flex:0 0 auto;
      /*flex的專案設定，flex是如下三個的縮寫flex: flex-grow（專案放大比例，預設值0） flex-shrink（專案縮小比例 ，預設值1）  flex-basis（預設值auto） */
      background: red;
     }

     .right{
     flex:1 1 auto;
     background: yellow;
       }
    </style>