找了个 iPad 试了试,.navbar 中加上 `flex: none;` 就好了,发生这种现象的布局:
1. 父元素是 flex 布局 column 排列,并且父元素高度为 100%
2. 子元素有多个,一个 flex: 1,其他子元素未设置 flex,暂叫 flex: 1 的元素为 main
3. 当 main 的子元素超出 flex 布局分配的高度,这时 main 被子元素撑高
NOTE: 现象仅在 iPad Safari 真机上有,Mac Safari 弹性模式都模拟不出来
我猜:main 被子元素撑高后,作为 flex 弹性布局,nav 被作为压缩对象,在 iPad Safari 下高度被压缩成 0 (其他环境均有高度),只留下了 nav 子元素的样式高度,`flex: none;` 可以避免被压缩。
当然只是我猜,真正具体原因还是得靠真大佬... 我也蹲个坑。
以下是简易的复现代码:
https://github.com/Aliveing/odd-safari-flex-issue/blob/main/code.html现象查看:
https://aliveing.github.io/odd-safari-flex-issue/