css布局------左邊寬度不定,右邊寬度自動填滿剩余空間

HTML

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS

/*方法1：浮動布局實現*/
.container {
  overflow: hidden;
}
.left {
  float: left;
  height: 100px;
  background-color: red;
}
.right {
  max-width: 100%;
  height: 100px;
  background-color: blue;
}

/*方法2：彈性布局實現*/
.container {
  display: flex;
}
.left {
  flex: 0 0 auto;
  height: 100px;
  background-color: red;
}
.right {
  flex: 1 1 auto;
  height: 100px;
  background-color: blue;
}