Scrollbares Element im Flex-Container funktioniert nicht cross browser

Question

So habe ich für die meisten von heute basteln versucht verschiedene Lösungen und ich habe Schwierigkeiten, etwas zu bekommen, das über Browser funktioniert.

Was ich versuche zu erstellen ist 2 Abschnitte in einem festen Div, der erste mit einer statischen Höhe und der zweite, um den Rest zu füllen. Jeder von diesen hat eine Schaltfläche, um ihre Sichtbarkeit umzuschalten, wenn die erste ausgeblendet ist, füllt die zweite Box den gesamten Raum. Dies funktioniert über alle Browser hinweg, was ich sagen kann.

Das Problem ist mit dem Code in der zweiten Box, in diesem gibt es eine Kopfzeile, gefolgt von einer Liste, das wird automatisch Größe, aber nicht in der Flex-Box schrumpfen, dann eine andere Kopfzeile, die eine zweite Liste folgt, Aber mit dieser Liste möchte ich, dass es scrollbar ist. Hier scheint das Problem zu liegen, auf das ich stoße.

Wie Sie auf dem ersten Bild sehen können, scheint es in Chrome und MS Edge gut zu funktionieren. Es scheint jedoch in Firefox und Safari zu spielen, da es nicht scrollt, es fällt nur vom Ende der Seite, wie Sie im zweiten Bild sehen können.

Wenn mir jemand in die richtige Richtung zeigen könnte, wäre das eine große Hilfe!

html,body { 
    height:100%; 
    width:100%; 
    margin:0; 
} 

.container { 
    position:fixed; 
    top:32px; 
    left:0; 
    right:0; 
    bottom:0; 
    width:220px; 

    display: -webkit-box; 
    display: -moz-box; 
    display: box; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    box-orient: vertical; 
} 

.container * { 
    width:100%; 
} 

#box1 { 
    background:green; 
    height: 220px; 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    box-flex: 0; 
    border: 2px solid yellow; 
} 

#box2 { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-flex-wrap: nowrap; 
    -ms-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-justify-content: flex-start; 
    -ms-flex-pack: start; 
    justify-content: flex-start; 
    -webkit-align-content: flex-start; 
    -ms-flex-line-pack: start; 
    align-content: flex-start; 
    -webkit-align-items: flex-start; 
    -ms-flex-align: start; 
    align-items: flex-start; 

    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1; 
    border: 2px solid yellow; 
} 

.header { 
    background:red; 

    -webkit-flex: 0 0 24px; 
    -ms-flex: 0 0 24px; 
    flex: 0 0 24px; 

    -webkit-align-self: auto; 
    -ms-flex-item-align: auto; 
    align-self: auto; 
    } 

    #list1 { 
    -webkit-flex: 0 0 auto; 
    -ms-flex: 0 0 auto; 
    flex: 0 0 auto; 

    -webkit-align-self: auto; 
    -ms-flex-item-align: auto; 
    align-self: auto; 

    background:orange; 
    } 

    #list2 { 
    -webkit-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 

    -webkit-align-self: auto; 
    -ms-flex-item-align: auto; 
    align-self: auto; 

    background:blue; 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 

http://codepen.io/anon/pen/qNOxEj

Answer 1

Hier ist ein Anfang, die Cross-Browser arbeiten.

Sie müssen die Präfix-Flex-Eigenschaften für die älteren Browser hinzufügen, auf die Sie zielen möchten.

html, body{ 
 
    margin: 0; 
 
} 
 
.flex{ 
 
    display:flex; 
 
} 
 
.flex.column { 
 
    flex-direction: column 
 
} 
 
.container{ 
 
    margin-top: 32px; 
 
    height: calc(100vh - 32px); 
 
} 
 
.box { 
 
    background: green; 
 
    height: 100px; 
 
} 
 
.list1 { 
 
    background-color: orange; 
 
} 
 
.list2{ 
 
    flex: 1; 
 
    background: lightblue; 
 
    overflow: auto; 
 
}

<div class="flex column container"> 
 
    <div class="box">  
 
    </div> 
 
    <div class="list1"> 
 
    some header <br> 
 
    <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
    </ul> 
 
    more text 
 
    </div> 
 
    <div class="list2"> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    Bla bla<br> 
 
    </div> 
 
</div>