el-table宽度无限变大问题

1. 前言

自己搭建了一个Layout，整体结构如下：
Layout.vue

2. 问题

① 点击收起图标，再展开，el-table无法再自动缩放
② 滚轮缩小浏览器屏幕，再放大，el-table无法再自动缩放
如下：

3. 问题原因

网上搜的原因基本上都说是跟父组件的样式display:flex和flex:1有关，因为我是主做后端的，其中的原理不知道是啥，不过网上说的应该是对的。如果有前端大神能讲明白其中的逻辑，请不吝告知下^^

4. 问题解决

① 在使用el-table页面中添加以下样式：

<style lang="less" scoped>
// 解决el-table宽度无限拉伸问题
::v-deep .el-table{
  width: 100%;
  .el-table__header-wrapper table,.el-table__body-wrapper table{
    width: 100% !important;
  }
  .el-table__body, .el-table__footer, .el-table__header{
    table-layout: auto;
  }
}
</style>

② 全局解决
创建/src/assert/style/index.css样式

.el-table{
  width: 100%;
  
}
.el-table__header-wrapper table,.el-table__body-wrapper table{
  width: 100% !important;
}
.el-table__body, .el-table__footer, .el-table__header{
  table-layout: auto;
}

在main.js中引入index.css