I have encountered this bug on iOS version 9 when using with latest Boostrap 4 Beta. Basically I have a parent div and an ul element that contains multiple list items. The parent div is a flexbox with the dimensions are set to some numbers and turn on overflow for the children element. The list item is supposed to take 100% of the height of the parent. Here is the link to the demo code: https://codepen.io/nguyenthai/pen/jawzRo.
Most browsers display that fine. However, only on any version of iOS 9, the list is shrunk down since Safari does not calculate the proper height for the container. I believe there are several variants of this bug existed and most of them have been fixed from iOS 10 and above. But I do need the support for iOS 9 and so far none of the workarounds that I have found is working properly. Setting flex-shrink: 0; or using flex: 1 0 auto; did not yield success result. The only thing that would somehow mitigate this is to switch the list to use display: block rather than flex. However, that could have effect on other browsers as well and I only want the fix to apply specifically for any iOS version 9.
So any ideas on how to fix this without radically changing the syntax and affecting other browsers?