Ausgabe mit „overflow: auto“ auf Element in Fluid Flexbox Behälter in Internet Explorer 11

Question

Aufgabe:

Es ist ein Kasten mit Flüssigkeitshöhe, die im Browser-Fenster zentriert werden muss. Es besteht aus drei Teilen: - Oberteil mit beliebiger Länge, je nach Text innerhalb - Unterteil mit beliebiger Länge, je nach Text indside - Mittelteil, die rollbaren ist, wenn es nicht genug Platz ist, den Text

zu passen Problem: Implementieren der Aufgabe Ich verwende Flexbox auf dem übergeordneten display: flex; flex-direction: column;. Obere und untere Teile haben flex-shrink: 0; Der Teil in der Mitte ist auf overlow: auto festgelegt. Und aus irgendeinem Grund gibt es in Internet Explorer 11 keinen Bildlauf. Die Überlaufeigenschaft wird vollständig ignoriert. In Firefox und Chrome funktioniert es gut.

Screenshots:

Chrome/Firefox:

Internet Explorer 11:

Code:

.wrapper { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.box { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-width: 300px; 
 
    max-height: 90vh; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 

 
.top, 
 
.bottom { 
 
    flex-shrink: 0; 
 
    padding: 10px; 
 
    background: #ccc;  
 
} 
 

 
.scrollable { 
 
    overflow: auto; 
 
}

<div class="wrapper"> 
 
    <div class="box"> 
 
    <div class="top">I'm any length text</div> 
 
    <div class="scrollable"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eleifend nisi ac laoreet. Praesent commodo bibendum turpis nec finibus. Aenean ac tincidunt velit. Sed et sodales quam, efficitur viverra erat. Pellentesque aliquet ultrices lectus at vulputate. In pulvinar nec ex sed condimentum. Vivamus vitae vulputate urna. Aliquam lobortis iaculis lacus a dictum. Pellentesque odio mauris, tincidunt sit amet sem dapibus, pretium ornare turpis. In sit amet justo luctus, ultricies nisi eu, iaculis erat. Pellentesque et tempor nibh. Vivamus congue elementum elit, id tempus dolor laoreet sed. 
 

 
Vestibulum dictum efficitur metus, in consectetur turpis. Vestibulum vel vehicula ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc congue, odio ac malesuada pharetra, velit nisl facilisis lorem, at tincidunt ex metus volutpat diam. Integer varius dolor at tellus dapibus ultrices. Nulla sagittis purus in mauris vestibulum, ac facilisis turpis condimentum. Ut mattis in ex eu mattis. Nullam ac elit metus. Nullam finibus tempus lacus, sit amet sagittis ante. Morbi sit amet sem a nisi volutpat luctus. Suspendisse eget condimentum dui. Proin suscipit sed sapien a efficitur.  
 
    </div> 
 
    <div class="bottom">I'm any length footer</div> 
 
    </div> 
 
</div>

Gibt es eine Idee, wie dieses Problem zu beheben? Was ist da falsch und wie macht man das IE Scrollen?

Answer 1

IE hat einige ziemlich Wanzen und min/max-height ist zu ignorieren einer von ihnen.

In diesem Fall fand ich auf der wrapper flex Spalte Richtung verwendet wird, und entfernen Sie align-items: center funktioniert der Trick.

Um es horizontal ausgerichtet zentriert zu machen, Auto-Marge auf dem box

Hinweis verwenden, da mit diesem im IE noch einen Schönheitsfehler ist, wenn Sie starten und manuell den Browser Höhe ändern, wird die Rolle nicht verschwinden auch wenn der Text passt, aber wenn die Seite neu geladen wird, funktioniert es. Ich schaue immer noch darauf, um zu sehen, was/wenn getan werden kann, um dieses Problem loszuwerden.

Stapel Snippet

.wrapper { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 

 
.box { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-width: 300px; 
 
    max-height: 90vh; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
    margin: 0 auto; 
 
} 
 

 
.top, 
 
.bottom { 
 
    flex-shrink: 0; 
 
    padding: 10px; 
 
    background: #ccc;  
 
} 
 

 
.scrollable { 
 
    overflow: auto; 
 
}

<div class="wrapper"> 
 
    <div class="box"> 
 
    <div class="top">I'm any length text</div> 
 
    <div class="scrollable"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eleifend nisi ac laoreet. Praesent commodo bibendum turpis nec finibus. Aenean ac tincidunt velit. Sed et sodales quam, efficitur viverra erat. Pellentesque aliquet ultrices lectus at vulputate. In pulvinar nec ex sed condimentum. Vivamus vitae vulputate urna. Aliquam lobortis iaculis lacus a dictum. Pellentesque odio mauris, tincidunt sit amet sem dapibus, pretium ornare turpis. In sit amet justo luctus, ultricies nisi eu, iaculis erat. Pellentesque et tempor nibh. Vivamus congue elementum elit, id tempus dolor laoreet sed. 
 
    </div> 
 
    <div class="bottom">I'm any length footer</div> 
 
    </div> 
 
</div>

Answer 2

try -ms-overflow-style: scrollbar; auf das Element mit