Unable to display AngularJS material checkbox horizontally on iPad but works on desktop

I am having an issue with AngularJS flex. In the first on the iPad, it is displayed vertically but on Chrome iPad mode in developer tools, it is displayed correctly.

Not sure what I did wrong, does flex not work on the iPad? I tried both Safari and Chrome browsers on the iPad and they display the same thing.

items display correctly on chrome developer mode iPad mode

items display vertically on ipad

        <md-card style="width: 98%;" ng-repeat="x in survey | orderBy:'qn'">
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline"></span>
            </md-card-title-text>
        </md-card-title>
        <md-card-content>
            <div ng-if="x.qType == 'check'" layout="row" layout-wrap >
                <div ng-repeat="y in x.op" flex="50">
                    <md-input-container>
                        <md-checkbox ng-model="chkbx" aria-label="" ng-click="click(y)" >
                                <img src="" style="">
                        </md-checkbox>
                    </md-input-container>
                </div>   
            </div>
        </md-card-content>
    </md-card>