为什么flex列在Safari中的高度不一样，但是Chome很好？

Question

我在flex包装器中有2个cols。这个cols有display：flex也。在div内部，minh100vh和h100％。当我在Chrome，Firefox甚至IE中测试此代码时，我会看到具有相同高度和内部div的列对于所有列的高度都是拉伸的。但是当我在Mac或Ipad中打开Safari时，这种结构会崩溃，因为我的列只有最小高度100vh。

链接：example link

IMG：

    body {
       height: 100%;
       ...
    }    
    .container {
        display: flex;
        min-height: 100vh;
        height: 100%;
        ...
    }
    .col {
        display: flex;
        min-height: 100vh;
        ...
    }

    div {
        min-height: 100vh;
        height: 100%;
        ...
    }