IE11とSafariでネストされたフレックスラップは機能しません

Question

フレックスボックスにネストされたナビバーを作成しようとしています。IE11をサポートしたいと思います。 私はフレックス方向：行を使用します。フレックスラップ：ラップ; on .navbar。 .nav項目でも同じことをしています。 ChromeとFirefoxではすべてうまく動作しますが、IE11やSafariではうまく動作していないようです。

IE11とSafariでは、画面を縮小すると、.navbarの項目が新しい行にスナップします。しかし、これは.navの項目では起こりません。 .navの項目はインラインのままで、navbarsボックスから抜け出します。

この問題を修正することは可能ですか？

body { 
 
    font-size: 16px; 
 
} 
 

 
.navbar { 
 
    width: 100%; 
 
    background-color: blue; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-box-pack: justify; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 
} 
 

 
.logo { 
 
    -webkit-box-flex: 0; 
 
    -ms-flex: 0 0 auto; 
 
    flex: 0 0 auto; 
 
} 
 

 
.left { 
 
    -webkit-box-flex: 1; 
 
    -ms-flex: 1 0 auto; 
 
    flex: 1 0 auto; 
 
} 
 

 
.right { 
 
    -webkit-box-flex: 0; 
 
    -ms-flex: 0 0 auto; 
 
    flex: 0 0 auto; 
 
} 
 

 
.nav { 
 
    list-style-type: none; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-box-pack: justify; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 
} 
 

 
.nav li { 
 
    -webkit-box-flex: 0; 
 
    -ms-flex: 0 0 auto; 
 
    flex: 0 0 auto; 
 
    padding: .8em 1em; 
 
}

<div class="navbar"> 
 
    <div class="logo"> 
 
    <ul class="nav"> 
 
     <li>My Company</li> 
 
    </ul> 
 
    </div> 
 
    <div class="left"> 
 
    <ul class="nav"> 
 
     <li>Home</li> 
 
     <li>About</li> 
 
     <li>Settings</li> 
 
    </ul> 
 
    </div> 
 
    <div class="right"> 
 
    <ul class="nav"> 
 
     <li>Item</li> 
 
     <li>Item</li> 
 
     <li>Item</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

OK]をクリックして、この問題の解決策を見つけました。私はflexを削除しました：0 0 auto; .navから、今はすべてが正常に動作します。 マークアップも変更して、できるだけシンプルにしました。

以下の例を参照してください：

body { 
 
    font-size: 16px; 
 
} 
 

 
.logo { 
 
    padding-right: 30px; 
 
} 
 
.navbar { 
 
    width: 100%; 
 
    background-color: blue; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
.nav { 
 
    list-style-type: none; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
.nav li { 
 
    flex-grow: 0; 
 
    flex-shrink: 0; 
 
    flex-basis: auto; 
 
    padding: .8em 1em; 
 
}

<nav class="navbar"> 
 
    <ul class="nav"> 
 
    <li class="logo">My Company</li> 
 
    <li>Home</li> 
 
    <li>About</li> 
 
    <li>Settings</li> 
 
    </ul> 
 
    <ul class="nav right"> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    </ul> 
 
</nav>