记小程序flex布局垂直排列出现高度崩塌的问题

今天开发的小程序遇到了一个问题，在 iPhone8 iOS 12.2 的设备上访问出现了高度崩塌的问题，但是在其它的型号的 iOS 和 Android 设备上没有复现，
一开始以为是 微信版本 的问题，但是更新到了最新还是出现该问题。调试了一下发现问题出在子元素的 display:flex 上，修改为 block 之后高度就不会崩塌了，但是元素的样式就没办法做了。

问题截图

具体的示例点击 🔗查看代码片段，可以尝试复现看看，暂且只发现能在 iPhone8 iOS 12.2 的设备(实机)上会复现。

一下子不知道该如何解决，暂且Google到了一个解决方案：

// 给会出现高度坍缩的元素加上 flex-shrink: 0;
.item{
  // ...其他样式
  flex-shrink: 0;
}

如果知道为什么会崩塌的大佬，可以前往我在 思否的提问 或者 Mail 📧给我

参考

微信小程序 iOS flex布局高度塌陷 - s_qiu

小程序flex容器竖向排列高度崩塌的问题