如何实现左侧宽度固定，右侧宽度自适应的布局

DOM结构

<div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

利用float + margin实现

.box {
 height: 200px;
}
.box > div {
  height: 100%;
}
.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}
.box-right {
  margin-left: 200px;
  background-color: red;
}

利用calc计算宽度

.box {
 height: 200px;
}
.box > div {
  height: 100%;
}
.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}
.box-right {
  width: calc(100% - 200px);
  float: right;
  background-color: red;
}

利用float + overflow实现

.box {
 height: 200px;
}
.box > div {
  height: 100%;
}
.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}
.box-right {
  overflow: hidden;
  background-color: red;
}

利用flex实现

.box {
  height: 200px;
  display: flex;
}
.box > div {
  height: 100%;
}
.box-left {
  width: 200px;
  background-color: blue;
}
.box-right {
  flex: 1; // 设置flex-grow属性为1，默认为0
  overflow: hidden;
  background-color: red;
}