Прокручиваемый элемент в гибком контейнере, не работающем с перекрестным браузером

Question

Итак, я уже много раз пытался попробовать разные решения, и я изо всех сил стараюсь получить что-то, что работает в браузерах.

То, что я пытаюсь создать, - это 2 секции в фиксированном div, первый со статической высотой и второй, чтобы заполнить остальные. У каждого из них будет кнопка для переключения их видимости, когда первый будет скрыт, тогда второй блок заполнит все пространство. Из того, что я могу сказать, это прекрасно работает в браузерах.

Проблема с кодом во втором поле, внутри этого будет заголовок, за которым следует список, это будет автоматически размер, но не сжимается в поле flex, затем другой заголовок, следующий за вторым списком, однако с этим списком я бы хотел, чтобы это прокручивалось, вот где проблема, с которой я сталкиваюсь, кажется.

Как вы можете видеть на первом изображении, кажется, что он отлично работает в Chrome и MS edge. Однако, похоже, он работает в Firefox и Safari, так как он не прокручивается, он просто падает с конца страницы, как вы можете видеть на втором изображении.

Если кто-то может указать мне в правильном направлении, это будет большой помощью!

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

Вот начало, которое работает кросс-браузер.

Необходимо добавить префиксные свойства flex для старых браузеров, на которые вы хотите настроить таргетинг.

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>