html – 我的flexbox容器在Firefox中有额外的填充
发布时间:2020-12-14 23:26:53 所属栏目:资源 来源:网络整理
导读:参见英文答案 How can I get FF 33.x Flexbox behavior in FF 34.x?2个 我正在尝试使用制表符和无序列表创建一个布局,该列表垂直扩展到其容器高度的100%.我设法让它在Chrome和IE11中按预期工作,没有太多麻烦. 但是,在我的情况下,Firefox似乎有一点点怪癖,UL
参见英文答案 >
How can I get FF 33.x Flexbox behavior in FF 34.x?2个
我正在尝试使用制表符和无序列表创建一个布局,该列表垂直扩展到其容器高度的100%.我设法让它在Chrome和IE11中按预期工作,没有太多麻烦. 但是,在我的情况下,Firefox似乎有一点点怪癖,UL在容器外扩展了大约20px. View Plnkr Test Case 发生了什么的屏幕截图: 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,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 解决方法
这是因为Firefox在响应
Flexbox spec中的更新时处理flex元素
changed in version 34中的最小/最大宽度/高度的方式:
要修复它,你需要添加min-height:0;到你的#item-list> div选择器覆盖Firefox使用的默认值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> 我猜其他浏览器尚未更新以符合规范,或者他们已经更新并调整了他们的flexbox实现以进行补偿?我不确定. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |