Flex布局应用---子盒子定宽和子盒子自适应父盒子宽度

1.实现效果：红色盒子宽度不变，蓝色盒子宽度自适应父盒子宽度

2.实现
html

<div class="father">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>

css

.father {
            width: 50%;
            height: 600px;
            background-color: lightgray;
            margin: 0 auto;
            /* 父级元素一定要写display: flex; */
            display: flex;
        }
        
        .box1 {
            /* 定义子项目分配剩余空间，表示占多少份数 */
            flex: 1;
            height: 50px;
            background-color: skyblue;
        }
        
        .box2 {
            width: 50px;
            height: 50px;
            background-color: red;
        }