1. 首页
  2. 问答
  3. 我的flexbox容器在Firefox中有额外的填充

我的flexbox容器在Firefox中有额外的填充

2015-07-11 101 views
5

我试图创建一个带有制表符和无序列表的布局，该列表垂直扩展到其容器高度的100％。我设法在Chrome和IE11中按预期工作，没有太多麻烦。我的flexbox容器在Firefox中有额外的填充

然而，在我的情况下，Firefox似乎在UL容器的外部扩展了大约20px的位置上有点怪诞。发生了什么事的

View Plnkr Test Case

截图： enter image description here

HTML：

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="script.js"></script> 
</head> 

<body> 
    <div id="wrapper"> 
    <header>Some header...</header> 
    <div class="board-panel"> 
     <div id="board-list"> 
     <ul class="lobby-tabs nav nav-tabs"> 
      <li ng-class="{active: activeTab == 'favorites'}"> 
      <a ng-click="switchTab('favorites')">Favorites</a> 
      </li> 
      <li ng-class="{active: activeTab == 'public'}"> 
      <a ng-click="switchTab('public')">Public</a> 
      </li> 
      <li ng-class="{active: activeTab == 'private'}"> 
      <a ng-click="switchTab('private')">Private</a> 
      </li> 
      <li class="pull-right" ng-class="{active: activeTab == 'create'}"> 
      <a ng-click="switchTab('create')">Create a Board</a> 
      </li> 
     </ul> 
     <div ng-show="activeTab != 'create'"> 
      <div class="board-controls"> 
      <button class="btn btn-default pull-right" ng-click="refresh()"> 
       <i class="glyphicon glyphicon-refresh"></i> Refresh 
      </button> 
      </div> 
      <ul class="list-group"> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      <li class="list-group-item" ng-repeat="item in items | filter: filter track by $index">Some item...</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
</body> 

</html>

CSS：

html, 
body, 
#wrapper { 
    height: 100%; 
} 

#wrapper { 
    display: flex; 
    flex-direction: column; 
} 

#wrapper > header { 
    height: 50px; 
    flex: 0; 
    background: rgba(129, 219, 255, 1); 
} 

#wrapper > div { 
    flex: 1; 
    background: rgba(129, 219, 255, 0.5); 
    max-height: 100%; 
} 

#board-list { 
    display: flex; 
    flex-direction: column; 
    background: #eee; 
    height: 100%; 
    max-height: 100%; 
    overflow: hidden; 
    width: 476px; 
    margin: 0 auto; 
} 

#board-list > div { 
    border: 1px solid #AAB3B3; 
    border-top: none; 
    display: flex; 
    flex: 1; 
    flex-direction: column; 
    height: 100%; 
    max-height: 100%; 
} 

.board-controls { 
    padding: 5px 10px; 
    background: #F1F1F1 none repeat scroll 0% 0%; 
} 

.board-controls .filter-label { 
    margin: 10px 5px 10px 0; 
    font-weight: 700; 
    float: left; 
} 

.list-group { 
    overflow-y: scroll; 
}

View Plnkr Test Case

来源

2015-07-11 user1960364

回答

3

这是因为火狐的方式处理在flex元件changed in version 34最小/最大宽度/高度响应于在Flexbox spec更新：

为了提供挠性的项目进行更合理的默认最小大小，该规范引入了一个新的自动值作为CSS 2.1中定义的最小宽度和最小高度属性的初始值。

要解决它，你需要添加min-height: 0;您#item-list > div选择覆盖的auto默认值Firefox使用：

JSFiddle Example

html, body { 
 
    height: 100%; 
 
} 
 
#wrapper { 
 
    height: 50%; 
 
    background: #EAF9FF; 
 
} 
 
#item-list { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
    background: #B8E8F8; 
 
    width: 476px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
} 
 
#item-list > .nav-tabs { 
 
    border: none; 
 
} 
 
#item-list > div { 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: #9FD9F0; 
 
    padding: 10px; 
 
    min-height: 0; /* This property is new */ 
 
} 
 
.list-group { 
 
    overflow-y: scroll; 
 
    background: #82C8E0; 
 
    padding: 10px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="wrapper"> 
 
    <div id="item-list"> 
 
     <ul class="nav nav-tabs"> 
 
      <li><a href="#">tab1</a></li> 
 
      <li><a href="#">tab2</a></li> 
 
      <li><a href="#">tab3</a></li> 
 
      <li class="pull-right"><a href="#">tab4</a></li> 
 
     </ul> 
 
     <div ng-show="activeTab != 'create'"> 
 
      <ul class="list-group"> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
       <li>Some item...</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

我猜其他浏览器还没有更新，以符合规范呢，或者他们已经更新和也调整了他们的flexbox实现来补偿？我不确定。

来源

2015-07-11 08:02:30 TylerH

+0

你，先生，是一个救星。谢谢 ：） – user1960364

相关问题

 相关问题