html - Flex Box 在 IE11 和 Safari 上重叠在 iPhone 上

Question

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

windows(chrome、FFox)OK

安卓( Chrome )OK

Ipad Safari、Chrome OK

Iphone Safari 和 IE11 重叠问题

每当 flex-direction:column media query works 发生重叠问题时，该网站在 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(小屏幕)上查看网站时，右侧部分与左侧部分重叠。

我尝试了一些解决方案，但没有一个奏效。 (比如设置最小高度)

我在等你的评论。感谢您的阅读。

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;
  }
}