关于flex布局，为什么右边DIV没有自适应

Question

想做成这个，左右两个div合起来宽度100%屏幕宽度，我用的flex，代码如下：

.index-view {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    > aside {
        width: 220px;
        height: 100%;
        background-color: #343957;
        display: flex;
        flex-direction: column;
        .logo-image {
            width: 100%;
            height: 120px;
        }
    }
    > article {
        flex: 1;
        line-height: 60px;
        display: flex;
        flex-direction: column;
        > section {
            width: 100%;
            height: 60px;
            .collapse-btn {
                width: 60px;
                height: 60px;
                font-size: 28px;
                cursor: pointer;
                display: inline-block;
                transition: all .6s ease;
            }
            .el-dropdown {
                cursor: pointer;
            }
            .head-portrait {
                width: 36px;
                margin: 12px;
            }
            .collapse-class {
                transform: rotate(-90deg);
            }
        }
        > main {
            flex: 1;
            line-height: initial;
        }
    }
}

aside和article就是左右两个div，现在右div上有个按钮，点了之后左div会收缩宽度，在原宽度（220px）和60px之间切换，我第一次点，右div会自适应的变宽填充，但是我再点右div不会自适应的变窄，这是为什么？