Overflow-Eigenschaft funktioniert nicht in IE 11

Als Sie merkte, IE11 hat viele Probleme, rendering-flexbox. Die Tatsache, dass Sie nicht gefunden Dokumentation über dieses Thema konnte nur bedeuten, es wurde nicht dokumentiert noch. Aber es scheint ein Fehler zu sein.

In Bezug auf die overflow Eigenschaft, IE11 gelten overflow: visible unabhängig von dem tatsächlichen Wert, es sei denn, einer Breite oder Höhe deklariert ist.

In deinem Fall, einfach nur Umschalten von flex-basis: auto zu flex-basis: 75px (nur ein Beispiel), behebt das scrollbar-Problem.

Als eine Feste Höhe ist nicht, was Sie suchen, könnten Sie versuchen,targeting-Stile für nur IE11.

CSS:

.container {
  display: flex;
  max-height: 100px;
  flex-direction: column;
  border: 1px solid red;
}
.header {
  background: #eee;
}
.container > div {
  flex: 0 0 auto;
}
.container > div.content {
  flex: 0 1 75px;             /* adjusted */
  overflow: auto;
}

HTML:

<div class="container">
  <div class="header">Header without specific height. Always stays at top of .container,
                      even if it is so long it uses up two lines.</div>
  <div class="content">
    <div>Item no 1 in long list</div>
    <div>Item no 2 in long list</div>
    <div>Item no 3 in long list</div>
    <div>Item no 4 in long list</div>
    <div>Item no 5 in long list</div>
    <div>Item no 6 in long list</div>
    <div>Item no 7 in long list</div>
    <div>Item no 8 in long list</div>
    <div>Item no 9 in long list</div>
    <div>Item no 10 in long list</div>
    <div>Item no 11 in long list</div>
    <div>Item no 12 in long list</div>
  </div>
</div>