Flexbox item is shrunk down on iOS 9 when the parent container is set as a specific height

Question

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?

Answer 1

A flex item by default is allowed to shrink, flex-shrink: 1, and it appears this is also what iOS9 allow them to.

By giving the li flex-shrink: 0 should prevent that.

Updated codepen

Stack snippet

.test {
  width: 400px;
  height: 500px;
  overflow: auto;
}
.list-group-item {
  flex-shrink: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="test d-flex flex-column">
  <ul class="list-group h-100">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
<div>