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

Question

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

简略样式(stylus)

.list {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
.item {
  margin-bottom: 15rpx;
  display: flex;
  justify-content: flex-start;
  position: relative;
  &-content {
    padding: 20rpx 30rpx;
    display: inline-block;
    box-sizing: border-box;
  }
}

具体可以查看 🔗代码片段 尝试复现，
暂且只发现能在 iPhone8 iOS 12.2 的设备上会复现，模拟器不行需要实机查看。

不知道为什么高度会崩塌，暂且找到了一个解决方案：

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