（实时更新）

flex 可伸缩元素比例不正确（Android 4.0 - 4.3，iOS 低版本）

使用 flex 布局，在现阶段已经是非常靠谱的方案了，因为 flex 布局已经在大多数主流浏览器中兼容。但是，flex 布局还是有不少需要注意的兼容问题。

在 Android 4.0 - 4.3 和部分低版本 iOS 中，可伸缩元素（大小按比例缩放的元素）如果要确保比例正确，必须设置：

xxx {
    width: 0px;
}

其中，width，一般设置为 width: 0 或 1px、0.001% 等。

如果不设置，那么一旦 flex 的子元素的实际内容超过了按照伸缩比例应该拥有的宽度，在这些有 bug 的系统中就会出问题，具体表现是**子元素的宽度将根据实际宽度进行延伸，最多可以占据整个屏幕的宽度（即使它的 flex 布局的父元素设置了宽度，它自身仍然可以撑开以达到整个屏幕的宽度）。

题外话：我帮你整理了包括 AI 写作、绘画、视频（自媒体制作）零门槛 AI 课程 + 国内可直接顺畅使用的软件。想让自己快速用上 AI 工具来降本增效，辅助工作和生活？限时报名。