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

时间:2016-06-07 18:35:38

标签: html css css3 flexbox

所以我一直在修补今天的大部分时间尝试不同的解决方案,而且我很难找到适用于浏览器的东西。

我想要创建的是固定div中的2个部分,第一部分具有静态高度,第二部分填充其余部分。每个都有一个按钮来切换它们的可见性,当第一个被隐藏时,第二个框将填充整个空间。从我能说的内容来看,这在浏览器中运行良好。

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

正如您在第一张图片中看到的,它似乎在Chrome和MS边缘正常工作。然而它似乎在firefox和Safari中播放,因为它不会滚动,它只是从页面的末尾掉落,就像你在第二张图片中看到的那样。

如果有人能指出我正确的方向,这将是一个很大的帮助!

enter image description here enter image description here

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

1 个答案:

答案 0 :(得分:0)

这是一个跨浏览器工作的开始。

您需要为要定位的旧版浏览器添加带前缀的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>