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;
}