CSS flex Basis arbeitet nicht auf IE

Question

Ich habe hier ein codepen - https://codepen.io/ttmtsimon/pen/jadyWW?editors=1100

Ich habe ein einfaches nav Stil Layout, mit Links und ein Auswahlmenü.

Auf kleineren Bildschirm mag ich das Auswahlmenü auf seine eigenen auf dem Boden zu sitzen und zu 100% Breite

Ich habe diesen worjing mit Flex und Flex Ordnung und Basis.

Mein problen ist IE, die layput überhaupt nicht arbeiten (nicht ich Zugriff auf IE, aber ich habe gehört,)

Ich denke, es ist die Art und Weise IE die Basis behandelt.

Gibt es eine Möglichkeit, dieses Layout zu reparieren, um im IE mit flex zu arbeiten.

<section class="nav-bar"> 

    <div class='o-container '> 

     <div class='nav-bar__items'> 

      <div class="nav-bar__items-linkOne"> 
       <div class=""> 
        <span>Link One</span> 
       </div> 
      </div> 

      <div class="nav-bar__items-linkTwo"> 
       <span>Link Two</span> 
      </div> 

      <div class="nav-bar__items-linkThree">     
       <span class="o-svg-text__text-left">Link Three</span> 
      </div> 

      <div class="nav-bar__items-select"> 
       <div> 
       <span>Select: </span> 
        <select> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
         <option>Select Option here</option> 
        </select> 
       </div> 
      </div> 

     </div> 

    </div> 

</section> 

Answer 1

Entfernen Sie einfach justify-content: flex-end; aus der &__items Regel.

Der Grund ist, dass IE nicht mag, wenn man justify-content und automatische Ränder kombiniert, also, indem er es entfernt, funktioniert es feine Querbrowser.

Updated codepen

Stapel Snippet

.o-container { 
 
    width: 90%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.nav-bar { 
 
    background-color: lightgreen; 
 
    padding: 16px 0; 
 
    width: 100%; 
 
} 
 
.nav-bar__items { 
 
    align-items: center; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    /* justify-content: flex-end;    removed */ 
 
    min-height: 40px; 
 
} 
 
.nav-bar__items-linkOne { 
 
    margin-right: auto; 
 
} 
 
.nav-bar__items-linkThree, .nav-bar__items-linkTwo { 
 
    padding-left: 8px; 
 
} 
 
.nav-bar__items-linkTwo { 
 
    padding-right: 8px; 
 
    margin-left: 20px; 
 
} 
 
.nav-bar__items-select { 
 
    display: block; 
 
    flex-basis: 100%; 
 
    margin-top: 20px; 
 
} 
 
.nav-bar__items-select select { 
 
    width: 100%; 
 
} 
 

 
@media (min-width: 1366px) { 
 
    .o-container { 
 
    max-width: 1366px; 
 
    } 
 
} 
 
@media (min-width: 918px) { 
 
    .nav-bar { 
 
    order: 1; 
 
    padding: 10px 0; 
 
    } 
 
    .nav-bar__items { 
 
    order: 1; 
 
    } 
 
    .nav-bar__items-linkThree, .nav-bar__items-linkTwo { 
 
    order: 3; 
 
    } 
 
    .nav-bar__items-linkTwo { 
 
    order: 3; 
 
    } 
 
    .nav-bar__items-linkThree { 
 
    order: 4; 
 
    } 
 
    .nav-bar__items-select { 
 
    flex-basis: auto; 
 
    order: 2; 
 
    margin-top: 0; 
 
    } 
 
    .nav-bar__items-select select { 
 
    width: 350px; 
 
    } 
 
}

<section class="nav-bar"> 
 

 
    <div class='o-container '> 
 
     
 
     <div class='nav-bar__items'> 
 

 
      <div class="nav-bar__items-linkOne"> 
 
       <div class=""> 
 
        <span>Link One</span> 
 
       </div> 
 
      </div> 
 

 
      <div class="nav-bar__items-linkTwo"> 
 
       <span>Link Two</span> 
 
      </div> 
 

 
      <div class="nav-bar__items-linkThree">     
 
       <span class="o-svg-text__text-left">Link Three</span> 
 
      </div> 
 

 
      <div class="nav-bar__items-select"> 
 
       <div> 
 
       <span>Select: </span> 
 
        <select> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
         <option>Select Option here</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 

 
     </div> 
 

 
    </div> 
 

 
</section>