Android浏览器中的Flexbox网格

Question

一些CSS;

  #category-grid {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    margin-top: -10px; }

  .category-grid-link {
    position: relative;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33%;
        -ms-flex: 0 0 33.33%;
            flex: 0 0 33.33%; }

  .category-grid-link img {
    display: block;
    width: 100%; }

制作3 x 3网格。除Android浏览器外，其他所有功能都可以。在不使用网格的情况下，我得到了长线而没有包裹。

我如何让这个工作？

这里的jsfiddle; https://jsfiddle.net/chrispink/3069vpdp/3/