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>