Flex Direction Column无法在手机上使用？

Question

我最近遇到了一个与flexbox有关的问题。我有一个Flex容器，里面有许多flex项目，设置为wrap。这些物品也是柔性容器，基于三分之一的父母，屏幕尺寸较大，大小为平板电脑的一半，移动显示屏的100％。你可以想象你的脑袋里倒塌的柱子。它工作得很好，直到我检查了我的手机，发现手机上的物品根本没有显示。

我环顾四周，看到有时柔性包装在ios中表现得很奇怪，所以我在移动设备上设置了flex wrap to none和flex direction column，但它仍然没有显示图像。我的解决方案最终是将flex项目切换到display：block on mobile，因为我不再需要flex功能了。这导致项目再次出现。

其他人遇到过这个吗？如果是这样，你知道它为什么会发生，你的解决方案是什么？我的完成代码下面有一个代码示例（它是sass）。值得注意的是，这是Flex容器中的Flex容器。

.listing {
            display: flex;
            flex-basis: calc(33.3% - 1.5rem);
            margin-right: 0;
            margin-bottom: 5rem;
            margin-right: .75rem;
            margin-left: .75rem;

            @media screen and (max-width: 768px) {
                margin-right: .75rem !important;
                flex-basis: calc(50% - 1.5rem);
            }

            @media screen and (max-width: 991px) {
                flex-basis: calc(50% - 1.5rem);
            }

            @media screen and (max-width: 560px) {
                display: block;
                flex-basis: calc(100%);
            }
        }