vue Elemen-ui table 組件在使用flex布局后，表格寬度隨頁面變寬，但不能恢復的問題

背景： 左側伸縮導航菜單，右側的剩余部分為表格，左側導航隱藏后再顯示，表格會出現滾動條

<div class="flex">
    <aside style="width: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%;

        width: 100%;

        box-sizing: border-box;

    }

    div {

        position: relative;

        height: 100%;

        width: 100%;

    }

    aside {

        position: absolute;

        width: 100px;

        top: 0;

        bottom: 0;

        left: 0;

        background-color: aquamarine;

    }

    main {

        width: 100%;

        height: 100%;

        padding-left: 100px;

        box-sizing: border-box;

        background-color: aliceblue;

    }

</style>