SOURCE

new Vue({
    el: '#app',
    data: {
        tableData: [{
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        }
        ]
    },
})

<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js">

</script>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js">
</script>

<div id="app">
	<div class="columns-box">
		<div class="column-left">
			<div class="column-resize-bar"></div>
			<div class="resize-line"></div>
			<div class="column-left-inner">
				红线可以拖动
			</div>
		</div>
		<div class="column-right">
			<div class="page-box">
				<div class="page-title">测试页面</div>
				<div class="page-header">
					<div class="header-item"></div>
					<div class="header-item"></div>
					<div class="header-item"></div>
					<div class="header-item"></div>
					<div class="header-item"></div>
				</div>
				<div class="page-table">
					<el-table :data="tableData" stripe height="100%">
                        <el-table-column type="index" fixed="left" >
						</el-table-column>
						<el-table-column prop="date" label="日期" width="180" show-overflow-tooltip >
						</el-table-column>
						<el-table-column prop="name" label="姓名" width="180" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="address" label="地址" show-overflow-tooltip>
						</el-table-column>
						<el-table-column with="120" fixed="right">
                            <el-button type="text" >测试</el-button>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</div>

html,
body {
    height: 100%;
    margin: 0;
}
#app {
    height: 100%;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
}
.columns-box {
    border: 1px solid #666666;
    box-sizing: border-box;
    height: 100%;
    .column-left {
        height: 100%;
        border-right: 1px solid #ff0000;
    }
    .column-right {
        height: 100%;
    }
    display: flex;
    align-items: stretch;
    > .column-left {
        min-width: 20px;
        position: relative;
        z-index: 1;
        > .column-resize-bar {
            width: 140px;
            height: 100%;
            min-width: 20px;
            padding-right: 4px;
            box-sizing: content-box;
            max-width: 500px;
            // transform: scaleY(-399);
            margin-right: -4px;
            resize: horizontal;
            overflow: scroll;
            opacity: 0;
            cursor: e-resize;
            cursor: col-resize;
            &::-webkit-scrollbar {
                width: 20px;
                height: 100vh;
            }
            &:hover {
                + .resize-line {
                    opacity: 1;
                }
            }
        }
        > .resize-line {
            opacity: 0;
            position: absolute;
            top: 0;
            right: -4px;
            bottom: 0;
            width: 4px;
            background-color: #A5B1FF;
            pointer-events: none;
        }
        > .column-left-inner {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }
    > .column-right {
        flex: 1;
        width: 0;
    }
}

.page-box {
	/* 这里至少需要保证，此容器的高度是铺满屏幕的 */
	height: 100%;
	display: flex;
	flex-direction: column; /* 主轴为垂直方向，起点在上沿。 */
}
.page-header {
    display: flex;
    flex-wrap: wrap;
}
.page-header .header-item {
    height: 30px;
    width: 160px;
    background-color: blue;
    margin: 5px;
}
.page-title {
    padding: 5px;
}
.page-box .page-table {
    padding: 10px; 
    min-height: 0; /* 选择注释最小高度查看 */
	flex-grow: 1; /* 可以是任意大于1 的值，其他相邻元素默认为0, 1 就会铺满剩余空间 */
}