两栏布局，左边定宽，右边自适应

html结构：

<div class="parent">
  <div class="one"></div>
  <div class="two"></div>
</div>

方法一：父元素display:flex，子元素：flex:1

.parent{
  display: flex;
}
.one{
  width: 200px;
  height: 200px;
  background: red;
}
.two{
  height: 300px;
  background: black;
  flex: 1;
}

方法二：父元素display:table，子元素：display:table-cell

.parent{
  display: table;
  width: 100%;
}
.one{
  width: 200px;
  height: 200px;
  background: red;
  display: table-cell;
}
.two{
  background: black;
  display: table-cell;
}

方法三：触发元素的BFC特性

.one{
  width: 200px;
  height: 200px;
  background: red;
  float: left;
}
.two{
  height: 200px;
  overflow: hidden;
  background: black;
}

方法四：使用calc运算

.one{
  width: 200px;
  height: 200px;
  background: red;
  float: left;
}
.two{
  height: 200px;
  width: calc(100% - 200px);
  background:black;
  float: left;
}

来张以上方法的效果图：

两栏布局，左边定宽，右边自适应

推荐阅读