Karussell reagiert in IE11, aber nicht in Edge oder Chrome

Question

Jeder Grund, warum ein Karussell in Edge oder Chrome nicht reagiert, aber in IE11 immer noch reagiert. Das Karussell folgt dem reaktiven Design und reagiert auf Änderungen der Fenstergröße. Sobald ein Banner über dem Karussell platziert wird, reagieren sowohl das Banner als auch das Karussell nicht. Ihre Größe ändert sich nicht und es ist behoben. In IE11 passen das Banner und das Karussell wie gewünscht an die Fenstergröße an.

owlCarousel Version ist 2.1.6

$('.owl-carousel-1').owlCarousel({ 
        loop:true, 
        margin:10, 
        navText:['<','>'], 
        autoplay:false, 
        autoplaySpeed:1000, 
        autoplayHoverPause:false, 
        responsiveClass:true, 
        responsiveBaseElement:window, 
        responsiveRefreshRate:100, 
        responsive:{ 
         0:{ 
          items:1, 
          nav:true 
         }, 
         600:{ 
          items:2, 
          nav:true 
         }, 
         1000:{ 
          items:3, 
          nav:true 
         } 
        } 
       }); 

Answer 1

Anscheinend ist das Problem war, dass das Karussell innerhalb eines div innerhalb einer flexiblen Box war. Sobald ich die div-Breite eingegeben habe: 100%, reagierte und änderte sie sich schön. Die Breite: 100% wurde von IE nicht benötigt.

Das funktionierte in Rand, Chrome (Inline-Stil nur zu Demonstrations):

<div id="content"> 
    <div class="Grid Grid--gutters Grid--holly-grail" style="display:flex"> 
    <div class="Grid-cell main" style="width: 100%;"> 
     <div class="article-box"> 
       <div id="article"> 
        <section id="intro-carousel"> 
         <div class="owl-carousel owl-loaded owl-drag" id="intro-banner-carousel"> 
         </div> 
        </section> 
       </div> 
     </div> 
    </div> 
    <div class="Grid-cell aside aside-2" id="right-column"> 
     <div id="action-links"> 
     </div> 
     <div class="article-box Demo2 Holly2" id="contact-details"> 
     </div> 
    </div> 
    </div> 
</div>