IE11 上的 Flex Box 和 iPhone 上的 Safari 重叠

Question

我设计的网站，无法在 iPhone 和 IExplorer11 上正常显示。我已经检查过了

windows（chrome、FFox）确定

安卓（铬）好的

Ipad Safari、Chrome 好的

Iphone Safari 和 IE11 重叠问题

每当出现 flex-direction:column 媒体查询工作重叠问题时，网站在 IE11 大屏幕上正确显示。

我有一个基础 div #main 包含另外两个基础 div #right 和 #left

我的基本 div 的 css 代码是：

#main{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    padding: 10px;
    background-color: #f0f0f0;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
}


#left{
    -webkit-box-flex: 4;
    -webkit-flex-grow: 4;
    -ms-flex-positive: 4;
    flex-grow: 4;

    -webkit-flex-basis: 66.66%;
    -ms-flex-preferred-size: 66.66%;
    flex-basis: 66.66%;

    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;

    margin-right: 7.5px;
    position: relative;
}


#right{
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;

    -webkit-flex-basis: 33.33%;
    -ms-flex-preferred-size: 33.33%;
    flex-basis: 33.33%;


    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;

    margin-left: 7.5px;
    position: relative;
}

@media (max-width: 755px){
    #main{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

当我在 Iphone Safari 和 IE11（小屏幕）上查看网站时，右侧部分与左侧部分重叠。

我尝试了一些解决方案，但没有一个不起作用。 （如设置最小高度）

我在等你的 cmets。 感谢您的阅读。

here is the link to the page

Answer 1

这为我解决了所有问题：

@media (max-width: 755px){
  #main {
    display: block; /* remove flex parent */
  }
}

或这个版本：

@media (max-width: 755px){
  #left, #right {
    flex-basis: auto;
  }
}