flex容器中的可滚动元素不能跨浏览器工作

Question

所以我今天大部分时间都在尝试不同的解决方案，我一直在努力寻找可以跨浏览器工作的东西。

我要创建的是固定 div 中的 2 个部分，第一个具有静态高度，第二个用于填充其余部分。每一个都有一个按钮来切换它们的可见性，当第一个被隐藏时，第二个框将填满整个空间。据我所知，这在浏览器中运行良好。

问题在于第二个框中的代码，在这个里面，会有一个标题，然后是一个列表，这将自动调整大小但不会在弹性框中缩小，然后另一个标题跟在第二个列表之后有了这个列表，我希望它可以滚动，这就是我遇到的问题所在。

正如您在第一张图片中看到的，它似乎在 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>