我的flexbox容器在Firefox中有额外的填充

Question

我的flexbox容器在Firefox中有额外的填充

我正在尝试使用制表符和无序列表创建一个布局,该列表垂直扩展到其容器高度的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>

Run Code Online (Sandbox Code Playgroud)

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;
}

Run Code Online (Sandbox Code Playgroud)

View Plnkr Test Case

Answer 1

Tyl*_*erH 2

flex这是因为 Firefox 处理元素最小/最大宽度/高度的方式在版本 34 中发生了变化，以响应Flexbox 规范的更新：

为了给 Flex 项目提供更合理的默认最小尺寸，本规范引入了一个新的 auto 值作为 CSS 2.1 中定义的 min-width 和 min-height 属性的初始值。

要修复它，您需要添加min-height: 0;到选择器以覆盖Firefox 使用#item-list > div的默认值：auto

JSFiddle 示例

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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

我猜其他浏览器还没有更新以匹配规范，或者他们已经更新并调整了 Flexbox 实现来进行补偿？我不知道。

归档时间：	10 年，3 月前
查看次数：	403 次
最近记录：	10 年，3 月前