Flexbox not working on iPad and Safari [duplicate]

Answer 1

Have you tried setting flex values for the first-child and last-child li elements? I've found that iPads can get confused if none of the flex-items in a flex-container have a flex value. For example:

.container li:first-child {
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1;
}
.container li:nth-child(4) {
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1;
}