css 布局中，子组件完全占满父组件的空间

1、可以使用宽度百分比的形式，下面的例子是各占一半

<style>
.main{
    height:50px;
    width:200px;
    display:flex;
}
.left{
    width:50%
}
.right{
    width:50%
}
</style>
<div class='main'>
    <div class='left'></div>
    <div class='right'></div>
</div>

2、其中一部分子组件自由变化，后面的子组件固定宽度或者默认宽度

<style>
    .main{
        display:flex;
        height:50px;
        width:200px;
    }
    .left{
        flex:1;
    }
    .right{
        width:20px;
    }
</style>
<div class='main'>
    <div class='left'></div>
    <div class='right'></div>
</div>