让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;
}

---

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