Benim flexbox konteynerinde, Firefox

ek dolgu var. Sekmeler ve düzeninin yüksekliğinin dikey olarak% 100'e kadar genişleyen sırasız bir liste içeren bir düzen oluşturmaya çalışıyorum. Chrome ve hatta IE11'de beklendiği gibi çalışmayı çok fazla sorun olmadan başarmayı başardım. Bununla birlikte, Firefox'un durumumdaki UL'nin konteynerinin yaklaşık 20px'ini genişlettiği bir tuhaflık var gibi görünüyor. bitenlerdenBenim flexbox konteynerinde, Firefox

View Plnkr Test Case

Ekran Görüntüsü: 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

kaynak

2015-07-11 user1960364

Bu şekilde Firefox Flexbox spec bir güncelleme yanıt olarak flex elemanları changed in version 34 yılında min/max genişlik/yükseklik işlemesi nedeniyle geçerli:

esnek öğeler için daha makul varsayılan minimum boyut sağlamak Bu şartname, CSS 2.1'de tanımlanan min-genişlik ve min yükseklik özelliklerinin başlangıç değeri olarak yeni bir otomatik değer sunar.

düzeltmek için, Firefox kullanan auto varsayılan değeri geçersiz kılmak üzere #item-list > div seçicinin min-height: 0; eklemeniz gerekir:

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>

Diğer tarayıcıların henüz bu özelliklerle eşleşmesi için güncelleme yapmadım ya da ve güncellemelerini güncellemek için flexbox uygulamalarını da ayarladınız mı? Emin değilim.

kaynak

2015-07-11 08:02:30 TylerH

Siz, efendim, hayat kurtarıcı. Teşekkürler :) – user1960364

Benim flexbox konteynerinde, Firefox

cevap

İlgili konular