html - My flexbox container has extra padding in Firefox -
this question has answer here:
i'm trying create layout tabs , unordered list expands vertically 100% of container's height. managed working expected in chrome , ie11 without trouble.
however, firefox seems have bit of quirk ul expands 20px outside of container in case.
screenshot of what's happening: 
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 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 $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $index">some item...</li> <li class="list-group-item" ng-repeat="item in items | filter: filter track $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; }
this because way firefox handles min/max width/height in flex elements changed in version 34 in response update in flexbox spec:
to provide more reasonable default minimum size flex items, specification introduces new auto value initial value of min-width , min-height properties defined in css 2.1.
to fix it, you'll need add min-height: 0; #item-list > div selector override default value of auto firefox uses:
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; /* property 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>i guess other browsers haven't updated match spec yet, or they've updated and adjusted flexbox implementations compensate? i'm not sure.
Comments
Post a Comment