按钮排列出现未对齐

Question

我想要的效果是当宽度足够时这样显示

当宽度不足时这样显示

但是现在遇到另一种情况

如果宽度足够不是应该水平排列吗，不足时不是应该垂直排列吗，怎么会出现这种情况

代码：

html：

css：

.button.-green {

    color: var(--color-snow);

    background: var(--color-grass);

}

.button {

    display: flex;

    overflow: hidden;

    margin: 5px;

    padding: 8px 10px;

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    transition: all 150ms linear;

    text-align: center;

    white-space: nowrap;

    text-decoration: none !important;

    text-transform: none;

    text-transform: capitalize;

    color: #fff;

    border: 0 none;

    border-radius: 5px;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.3;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    justify-content: center;

    align-items: center;

    flex: 0 0 160px;

    box-shadow: 0.1px 0px 5px var(--color-smoke);

}

.button-container {  

    width: 100px;

    float: left;

}