利用display:flex实现一盒子固定宽高另一盒子占满剩余宽度

父元素设置弹性布局

.container {
            width: 500px;
            height:200px;
            display: flex;
        }

        .box1 {
            width: 100px;
            height: 100%;
            background-color: green;
        }

        .box2 {
            flex: 1;/*主要是这个起作用*/
            background-color: red;
        }

    
固定宽度
    
占满剩余宽度

• 结果

  
  
  结果.png
• 需要设置其他宽度也可以通过设置flex的大小来调节