React组件flexbox布局异常：固定宽高无法显示完美正方形

• Flex容器默认的align-items属性值为stretch，这个规则会强制子元素在交叉轴方向（横向flex容器的交叉轴为垂直方向）拉伸填充容器的可用高度。哪怕你给Cell设置了固定的height: 3rem，也会被这个规则覆盖，导致Cell高度被拉长，和宽度3rem不匹配，自然无法呈现正方形。

• 另外，Flex子元素默认开启flex-shrink: 1，当.row或.board容器的宽度不足以容纳所有Cell的3rem宽度总和时，Cell会被自动收缩宽度，使得实际宽度小于3rem，和固定高度形成差异，破坏正方形比例。

你可以通过给Cell添加align-self: flex-start（或者将父容器的align-items设为flex-start/center），同时设置flex-shrink: 0，就能让Cell保持3rem的固定宽高，恢复完美正方形。

内容的提问来源于stack exchange，提问作者Michel