iOS 13系统下flex子项出现拉伸问题如何解决？

根本原因 #

• iOS13的Safari内核存在flex布局兼容缺陷，flex子项默认的align-items: stretch规则会忽略max-width、max-height的约束，对设置了height: auto的元素强行拉伸，该问题仅存在于iOS13版本，后续系统版本已修复。
• 现有代码未显式覆写flex子项的对齐属性和flex基础参数，触发了该兼容bug。

修复方案 #

方案一：修改现有Card样式（改动最小） #

在原.Card的CSS规则中新增3行属性即可，对其他系统的原有展示效果完全无影响：

.Card {
  max-width: 20%;
  max-height: 100%;
  height: auto;
  /* 新增：关闭默认拉伸对齐 */
  align-self: flex-start;
  /* 新增：显式指定flex属性，避免iOS13尺寸计算异常 */
  flex-grow: 0;
  flex-shrink: 0;
}

方案二：嵌套容器适配（兼容性更强） #

如果Card内部有复杂布局，方案一不生效的话可以用嵌套容器的方式，避开flex直接作用在Card上的bug：

1. 给每个Card外层套一个div.CardWrapper容器，作为flex的直接子项
2. 调整CSS规则如下：

.Cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
/* 新增外层容器样式 */
.CardWrapper {
  max-width: 20%;
  flex: 0 0 auto;
  align-self: flex-start;
}
.Card {
  max-height: 100%;
  height: auto;
  width: 100%;
}

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