Flexbox odd Behavior on iOS Mobile Browsers and OS X Safari
<p>I am new to Flexbox because for my job I have to support back to IE8, so I have never really bothered with it until this project. </p>

<p>I am trying to figure out how to make a grid of "cards" have the same heights. These cards contain varying amounts of text inside of them, as well as an image. Since I am using AngularJS the complexity of JavaScript solutions to make this work is more than I have time for, thus I chose flexbox.</p>

<p>This is my relevant code for the card-wrapper (let me know if you need more):</p>

<pre><code>.card-grid {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    ...

    .data-card {
        height: auto;
        //IE fallback
        display: inline-block;
        //Modern Browsers
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

        ...

    }
}
</code></pre>

<p>And here is the relevant angular HTML for the above selectors:</p>

<pre><code>&lt;div class="card-group"&gt;
    &lt;ol class="cards card-grid invisible grid-row"&gt;
        &lt;li ng-repeat... class="data-card col xs-6 md-4 lg-3"&gt;
            &lt;a class="card" href="javascript:void(0)" ... &gt;
                ...
            &lt;/a&gt;
        &lt;/li&gt;
    &lt;/ol&gt;
&lt;/div&gt;
</code></pre>

<p>This is a screen shot of what is happening on Chrome and Safari in iOS:
<a href="https://i.stack.imgur.com/55M6f.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/55M6f.gif" alt="The problem is it shows the first card, then for some reason or another, the second card is on the next line..."></a>
The issue I am facing is that, it's showing that first card "Axial" and then the next card "Motor Start" Should be right next to it.</p>

<p>Things I've tried: </p>

<ul>
<li>Putting the wrap property on the item itself, instead of the wrapper, and that just looked awful</li>
<li>Defining the width, and using <code>flex-grow</code> but axial just goes to 100% width, and so the does very last (not depicted) card with nothing next to it.</li>
<li>Doing <code>wrap-reverse</code> but that just reversed the content and gave me the same problem.</li>
</ul>

<p>Then I popped open Safari on OS X and got this:
<a href="https://i.stack.imgur.com/Lv6Oi.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/Lv6Oi.gif" alt="Same issue as on iOS"></a></p>

<p>It works on:</p>

<ul>
<li>Chrome (Desktop)</li>
<li>Firefox (Desktop)</li>
<li>Internet Explorer Edge (Desktop)</li>
<li>Chrome (Andriod)</li>
</ul>

<p>The only places it's not working are on Apple browsers (i.e. Chrome iOS, and Safari Mobile, etc.)</p>

<p>So I am thinking it's a <code>-webkit-</code> thing, but that's sort of obvious. I just don't know what I am doing wrong in my code. I am unable to post a fiddle of my working code, because the project is ongoing.</p>

<p>Is there a special property I should be using in for flexbox that I am not using? Thanks ahead of time for any help.</p>