我的 flexbox 容器在 Firefox 中有额外的填充 [重复]答案

【问题标题】：My flexbox container has extra padding in Firefox [duplicate]我的 flexbox 容器在 Firefox 中有额外的填充 [重复]
【发布时间】：2015-09-29 23:36:33
【问题描述】：

我正在尝试创建一个带有标签的布局和一个垂直扩展至其容器高度的 100% 的无序列表。我设法让它在 Chrome 甚至 IE11 中按预期工作，没有太多麻烦。

但是，Firefox 似乎有点怪癖，在我的例子中，UL 在其容器之外扩展了大约 20 像素。

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

【问题讨论】：

标签： html css firefox flexbox

【解决方案1】：

这是因为 Firefox 处理 flex 元素 changed in version 34 中的最小/最大宽度/高度以响应 Flexbox spec 中的更新的方式：

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

要修复它，您需要将 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 实现来弥补？我不确定。

【讨论】：

您，先生，是救生员。谢谢:)