मेरे फ्लेक्सबॉक्स कंटेनर में फ़ायरफ़ॉक्स

में अतिरिक्त पैडिंग है, मैं टैब और एक अनियमित सूची के साथ एक लेआउट बनाने की कोशिश कर रहा हूं जो इसके कंटेनर की ऊंचाई के 100% तक लंबवत रूप से फैली हुई है। मैं इसे क्रोम और यहां तक कि आईई 11 में बिना किसी परेशानी के अपेक्षित काम करने में कामयाब रहा।मेरे फ्लेक्सबॉक्स कंटेनर में फ़ायरफ़ॉक्स

हालांकि, फ़ायरफ़ॉक्स में थोड़ा सा क्विर्क लगता है जहां यूएल मेरे मामले में इसके कंटेनर के बाहर लगभग 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>

सीएसएस:

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

इसका कारण यह है जिस तरह से फ़ायरफ़ॉक्स Flexbox spec में एक अद्यतन के जवाब में न्यूनतम/अधिकतम चौड़ाई/flex तत्वों changed in version 34 में ऊंचाई संभालती है:

फ्लेक्स मदों के लिए एक और अधिक उचित डिफ़ॉल्ट न्यूनतम आकार प्रदान करने के लिए , यह विनिर्देश सीएसएस 2.1 में परिभाषित न्यूनतम चौड़ाई और न्यूनतम ऊंचाई गुणों के प्रारंभिक मान के रूप में एक नया ऑटो मान प्रस्तुत करता है।

इसे ठीक करने के लिए, आप अपने #item-list > div चयनकर्ता के min-height: 0; जोड़ने के लिए कि फ़ायरफ़ॉक्स का उपयोग करता auto का डिफ़ॉल्ट मान ओवरराइड करने के लिए की आवश्यकता होगी:

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>

मुझे लगता है कि अन्य ब्राउज़रों ने अभी तक spec से मिलान करने के लिए अपडेट नहीं किया है, या उन्होंने और को अपडेट किया है ताकि वे अपने फ्लेक्सबॉक्स कार्यान्वयन को क्षतिपूर्ति के लिए भी समायोजित कर सकें? मुझे यकीन नहीं है।

स्रोत

2015-07-11 08:02:30 TylerH

आप, महोदय, एक जीवन बचतकर्ता हैं। धन्यवाद :) – user1960364

मेरे फ्लेक्सबॉक्स कंटेनर में फ़ायरफ़ॉक्स

उत्तर

संबंधित मुद्दे