在页面布局中，CSS如何实现左侧宽度固定，右侧宽度自适应的布局？

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

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

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

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

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