Question

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

然而，在我的情况下，Firefox似乎有点奇怪，UL在其容器外扩展约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>

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

Answer 1

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

为了为flex项提供更合理的默认最小大小，此规范引入了一个新的自动值作为CSS 2.1中定义的min-width和min-height属性的初始值。

要解决此问题，您需要将 min-height: 0; 添加到 #item-list > div 选择器，以覆盖默认值{{1} Firefox使用：

<强> JSFiddle Example

auto

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

我猜其他浏览器尚未更新以符合规范，或者他们已更新和还调整了他们的Flexbox实施以进行补偿？我不确定。

我的flexbox容器在Firefox

1 个答案: