并列的两个盒子，一个有固定宽度，如何让另一个占满

在开发的过程中，经常会遇到这样的需求，就是并列的两个盒子，一个有固定宽度，另一个盒子不指定宽度就可以占满其余的部分
父盒子给添加上flex属性，左边盒子指定宽度，给右边盒子加上flex:1属性就可以了

    <style>
	 .father{
		  width:100%;
		  display:flex; /*flex布局*/
		}
        .left{
        	background: red;
        	width:200px;
        	height: 200px;
        } 
       .right{
           flex:1;     /*flex:1*/
           height: 200px;
           background: yellow;  
       } 
	</style>
 
    <div class="father">
	     <div class="left"></div>
	     <div class="right"></div>
	</div>