CSS实现一个固定宽度另一个占满剩余空间的布局

在项目中经常碰到布局：一个父布局，包含多个子布局，其中一个或多个固定宽度，最后一个占满剩余空间。

遇到这种需求，可以用弹性盒子来实现。

布局如下：

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>

style如下：

.parent{
    height: 100px;
    display: flex;
}
.child1{
    width: 200px;
    background: red;
}
.child2{
    width: 300px;
    background: green;
}
.child3{
    flex: 1;
    background: blue;
}

效果如下：