方法一：将border改成outline

outline是不占据父级空间的

.chess {
    width : 50px;
    height: 50px;
    outline: 2px solid lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

方法二： 将盒子设置成border-box

.chess {
    width : 50px;
    height: 50px;
    border: 2px solid lightgray;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

border占居了宽度，导致子元素在父元素中换行问题解决

原文：https://www.cnblogs.com/zhizhi0810/p/11624692.html