html - Flex容器中的可滚动元素无法跨浏览器工作

所以我今天大部分时间都在尝试不同的解决方案，我正在努力获得跨浏览器工作的东西。
我试图创建的是固定div中的两个部分，第一个部分具有静态高度，第二个部分填充其余部分。每一个都有一个按钮来切换它们的可见性，当第一个被隐藏时，第二个框将填充整个空间。据我所知，这在浏览器上运行良好。
问题在于第二个框中的代码，在这个框中，将有一个头，然后是一个列表，这将自动调整大小，但不会在flex框中缩小，然后是第二个列表后面的另一个头，但是对于这个列表，我希望它是可滚动的，这就是我遇到的问题所在。
正如您在第一张图片中看到的，它在Chrome和MS edge中似乎运行良好。然而，它似乎在火狐和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

最佳答案

这是一个跨浏览器工作的开始。
您需要为您想要瞄准的旧浏览器添加前缀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>

关于html - Flex容器中的可滚动元素无法跨浏览器工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37686835/