一侧固定，一侧自适应的布局方式

HTML结构

<div class="parent">
   <div class="left" style="background-color: lightpink; min-height: 200px;"></div>
   <div class="right" style="background-color: deepskyblue; min-height: 400px;"></div>
</div>

方法一：float: left + overflow: hidden(触发BFC)

.left {
   width: 200px;
   float: left;
}

.right {
   overflow: hidden;
}

方法二：float: left + margin-left: leftWidth;

.left {
   width: 200px;
   float: left;
}
.right {
   margin-left: 200px;
}

方法三：flex布局 left固定width，right flex: 1;

.parent {
   display: flex;
   flex-direction: row;
}
.left {
   width: 200px;
}
.right {
  flex: 1;
}

方法四：position: absolute + margin-left: leftWidth;

.parent {
   position: relative;
}
.left {
   position: absolute;
   top: 0; left: 0;
   width: 200px;
}
.right {
   margin-left: 200px;
}

方法五：display: inline-block + calc (顶层元素需设置width使parent能够继承其宽度)

.parent {
   width: 100%;
   font-size: 0; /* 解决3px问题 */
}
.left {
   display: inline-block;
   font-size: 14px;
   width: 200px;
   vertical-align: top;
}
.right {
   display: inline-block;
   font-size: 14px;
   width: calc(100% - 200px);
}