<div class="content">
    <div class="left">固定宽度区</div>
     <div class="right">自适应区</div>
</div>

方法1：将左侧div浮动，右侧div设置margin-left

.content{
  background:pink;
  overflow: hidden;
}
.left{
  background: #BCE8F1;
  float: left;
  width:200px;
  
}
.right{
  background: #F0AD4E;
  margin-left:200px;
}

image.png

方法2：固定区采用绝对定位，自适应区设置margin

.content{
  background:pink;
  position: relative; 
  height:150px;
}
.left{
  background: #BCE8F1;
  position: absolute;
  left: 0; 
  top: 0;
  width:200px;
  height:100%;
}
.right{
  background: #F0AD4E;
  margin-left: 200px;
  height:100px;
}

缺点:
1、使用了绝对定位，若是用在某个div中，需要更改父容器的position。
2、没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。

image.png

方法3：使用display: table;

.content{
  background:pink;
  display: table;
  width:100%;
}
.left{
  background: #BCE8F1;
  display:table-cell;
  width:200px;
  height:150px;
}
.right{
  background: #F0AD4E;
  display:table-cell;
  height:100px;
}

优点，高度不受限制，随内容多少变化，设定的高度会作为最小高度；内容增多，高度随之增高。

image.png

方法4：双float + calc()计算属性（CSS3）

.content{
  background:pink;
  overflow: hidden;
}
.left{
  background: #BCE8F1;
  float:left;
  width:200px;
  height:150px;
}
.right{
  background: #F0AD4E;
  float:left;
  width:calc(100% - 200px);
  height:100px;
}

image.png

方法5：双inline-block + calc()计算属性

.content{
  background:pink;
  box-sizing: content-box;
  font-size: 0;
}
.left{
  background: #BCE8F1;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;  
  font-size: 14px;
  width: 200px;
}
.right{
  background: #F0AD4E;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width:calc(100% - 200px);
  font-size: 14px;
  /* height:100px; */
}

这种方法是通过width: calc(100% - 140px)来动态计算右侧盒子的宽度。需要知道右侧盒子距离左边的距离，以及左侧盒子具体的
宽度(content+padding+border)，以此计算父容器宽度的100%需要减去的数值。同时，还需要知道右侧盒子的宽度是否包含border
的宽度。
在这里，为了简单的计算右侧盒子准确的宽度，设置了子元素的box-sizing:border-box;以及父元素的box-sizing: content-box;。
同时，作为两个inline-block的盒子，必须设置vertical-align来使其顶端对齐。
另外，为了准确地应用计算出来的宽度，需要消除div之间的空格，需要通过设置父容器的font-size: 0;,或者用注释消除html中的空格等方法。

方法6:float + BFC方法

这个方案同样是利用了左侧浮动，但是右侧盒子通过overflow: auto;形成了BFC，因此右侧盒子不会与浮动的元素重叠。

.content{
  background:pink;
  overflow: auto; 
}
.left{
  float: left;
  width: 200px;
  /* height:150px; */
  background: #BCE8F1;
}
.right{
  overflow:auto;
  /* height:100px; */
  background: #F0AD4E;
}

image.png

方法7：flex（CSS3）

.content{
  background:pink;
  display: flex;   
}
.left{
  flex:0 0 200px;
  /* height:150px; */
  background: #BCE8F1;}
.right{
  flex: 1;
  /* height:100px; */
  background: #F0AD4E;
}

image.png

需要注意的是，flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。
为了让两个盒子高度自动，需要设置: align-items: flex-start;

文件链接：https://www.cnblogs.com/vicky123/p/8866548.html
BFC:https://www.w3cplus.com/css/understanding-css-layout-block-formatting-context.html