Thùng chứa flexbox của tôi có thêm đệm trong Firefox

Tôi đang cố tạo bố cục bằng các tab và danh sách không theo thứ tự mở rộng theo chiều dọc đến 100% chiều cao của vùng chứa. Tôi đã làm cho nó hoạt động như mong đợi trong Chrome và thậm chí cả IE11 mà không gặp nhiều rắc rối.Thùng chứa flexbox của tôi có thêm đệm trong Firefox

Tuy nhiên, Firefox dường như có một chút khó khăn khi UL mở rộng khoảng 20px bên ngoài vùng chứa trong trường hợp của tôi.

View Plnkr Test Case

Ảnh chụp màn hình của những gì đang xảy ra: 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

Nguồn

2015-07-11 user1960364

Điều này là do cách Firefox xử lý min/max chiều rộng/chiều cao tính bằng flex yếu tố changed in version 34 để đáp ứng với một bản cập nhật trong Flexbox spec:

Để cung cấp một kích thước tối thiểu mặc định hợp lý hơn cho các hạng mục flex , đặc điểm kỹ thuật này giới thiệu một giá trị tự động mới làm giá trị ban đầu của các thuộc tính min-width và min-height được xác định trong CSS 2.1.

Để khắc phục điều đó, bạn sẽ cần phải thêm min-height: 0; để #item-list > div chọn của bạn để ghi đè giá trị mặc định của auto mà Firefox sử dụng:

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>

Tôi đoán các trình duyệt khác chưa cập nhật để khớp với thông số kỹ thuật, hoặc họ đã cập nhật và cũng đã điều chỉnh triển khai hộp công cụ của họ để bù? Tôi không chắc.

Nguồn

2015-07-11 08:02:30 TylerH

Bạn, thưa bạn, là người tiết kiệm cuộc sống. Cảm ơn :) – user1960364

Thùng chứa flexbox của tôi có thêm đệm trong Firefox

Trả lời

Các vấn đề liên quan