vue Elemen-ui table 组件在使用flex布局后，表格宽度随页面变宽，但不能恢复的问题

背景： 左侧伸缩导航菜单，右侧的剩余部分为表格，左侧导航隐藏后再显示，表格会出现滚动条

<div class="flex">
    <aside style="100px">左侧导航</aside>
    <main class="flex1">
        <el-table>
        </el-table>
    </main>
</div>

<style>

    .flex{

        display: flex;

    }

    .flex1{

        flex:1;

    }

</style>

后修改为 定位

<div>

    <aside></aside>

    <main>

        <el-table>

        </el-table>

    </main>

</div>

<style>

    *{

        margin: 0;

        padding: 0;

    }

    html,body{

        height: 100%;

         100%;

        box-sizing: border-box;

    }

    div {

        position: relative;

        height: 100%;

         100%;

    }

    aside {

        position: absolute;

         100px;

        top: 0;

        bottom: 0;

        left: 0;

        background-color: aquamarine;

    }

    main {

         100%;

        height: 100%;

        padding-left: 100px;

        box-sizing: border-box;

        background-color: aliceblue;

    }

</style>