使用Flex布局造成的浏览器缩放时，内部页面改变大小缓慢问题

问题原因

（1）在项目中，使用iview作为ui组件开发，使用vue作为前端框架；
（2）在人员管理界面，左边是部门树，右边是人员列表；
（3）当点击浏览器右上角的缩小按钮时，改页面出现人员列表右边部门缩放缓慢，并且超过了5秒钟，严重影响用户体验。
（4）调查原因中发现：使用flex布局进行自适应时，计算缓慢；再加上iview的表格组件在进行缩放时的宽度计算也要耗费一些时间，因此造成了上述问题的出现

解决方法

1. 对于包裹部门树和人员列表的父级，放弃使用flex布局，改为block布局
2. 对于部门树和人员列表采用float:left，实现左右布局
3. 典型的左右布局，部门树左边固定宽度，右边使用calc计算宽度，至此该问题解决

简略代码如下

<div class='container'>
	<div class='tree-left'>
	</div>
	<div class='person-list'>
<div>
<style>
.container {
	display: block
}
.tree-left {
	float: left;
	width: 200px;
}
.person-list {
	float: left;
	width: calc(100%  -  200px);
}
<style>

注意事项

calc计算宽度在ie低版本的浏览器下不适用；如果想要兼容ie浏览器，可查看如下链接地址，找到适合项目的方法
http://zh.learnlayout.com/flexbox.html
https://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width