element ui table 在flex布局中宽度不能自适应

问题描述：

在vue-element-admin项目中需要实现多个列表并排排列，于是想到使用flex布局，页面渲染之后发现，当拉伸显示区域，table宽度能自动拉伸，但是当压缩显示区域发现，table的宽度不能自适应。

解决方法

.item-body {
	display: flex;
	height: 100%; // 此高度必须，否则table-father的高度为0，border无效
	.table-father {
	  flex: 1;
	  border-right: 1px solid #eee;
	  position: relative; // table的直接父元素加position属性
	  .el-table { // table 加position属性
	    position: absolute;
	  }
	}
}

备注

1. 关于flex布局

   a. flex下的子控件在主轴方向上的尺寸是无效的

   b. 子元素在主轴方向上的尺寸可以被子子元素撑开

   c. 非主轴方向上的尺寸不会被子子元素撑开

   d. flex下子元素为了自适应显示区域，把width和height设置100%时，需在该子元素的外层包一层position属性的父元素

   e. 元素使用position后衍生脱离了文件流，导致其父元素高度变成0，此时要给高度失效的元素加上height：100%。此时还要注意样式的继承问题。