按钮排列出现未对齐

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;}