让div占据父元素剩下的所有位置

场景模拟：

现在有一个父容器，里面有俩个div，左边的要给一个固定的200px的宽度，父容器剩下的宽度都归右边的div该怎么完成？
HTML代码：

<div class="wrap">
<div class="left"></div>
<div class="right">CSDN吴小迪</div>
</div>


解决问题的方法：

一：CSS3弹性盒

CSS代码：

.wrap{
display: flex;
background: green;
}
.left{
height: 100px;
width: 200px;
background: yellow;
}
.right{
height: 100px;
flex: 1;
background: orangered;
}


二：给左边元素一个浮动

CSS代码：

.left{
height: 100px;
width: 200px;
background: yellow;
float: left;
}
.right{
height: 100px;
background: orangered;
}

俩个代码实现的效果是一样的，效果图如下：