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%。此時還要注意樣式的繼承問題。