Firefox 中的 Flexbox 溢出问题 [重复]

Posted 2023-02-19

【中文标题】Firefox 中的 Flexbox 溢出问题 [重复]

【英文标题】：Flexbox overflow issue in Firefox [duplicate]

【发布时间】：2017-12-10 10:00:14

【问题描述】：

我在使用 flexbox 的测试项目上遇到问题。目标是构建一个仪表板，其中包含一些卡片列表，并排无限溢出。

我设法做到了，问题是：这些列表中的每个列表都有一个标题、一个卡片列表和一个页脚，并且列表高度不能超过父级可用高度。如果发生这种情况，列表必须只在卡列表上应用溢出。

在 chrome 上它工作得很好，但在 firefox 上......似乎渲染器无法处理内容溢出的可能性！我对这个真的很生气。

例子：

代码（也在Plunker）

// Code goes here
(function (angular) 
  angular.module("app", []);  
  
  angular.module("app").controller("AppController", AppController);
  
  AppController.$inject = ["$scope"];
  
  function AppController($scope) 
    var ctrl = this;
    ctrl.addCard = function (list) 
      list.cards.push(title: "Card " + (list.cards.length + 1));
    ;
    ctrl.lists = [
      
        title: "List 1",
        cards: [
          title: "Card 1",
          title: "Card 2",
          title: "Card 3",
          title: "Card 4",
          title: "Card 5"
        ]
      ,
      
        title: "List 2",
        cards: [
          title: "Card 1",
          title: "Card 2",
          title: "Card 3",
          title: "Card 4",
          title: "Card 5",
          title: "Card 6",
          title: "Card 7",
          title: "Card 8",
          title: "Card 9",
          title: "Card 10",
          title: "Card 11",
          title: "Card 12",
          title: "Card 13",
          title: "Card 14",
          title: "Card 15",
          title: "Card 16",
          title: "Card 17",
          title: "Card 18",
          title: "Card 19",
          title: "Card 20"
        ]
      ,
      
        title: "List 3",
        cards: [
          title: "Card 1",
          title: "Card 2",
          title: "Card 3",
          title: "Card 4",
          title: "Card 5"
        ]
      ,
      
        title: "List 4",
        cards: [
          title: "Card 1",
          title: "Card 2",
          title: "Card 3",
          title: "Card 4",
          title: "Card 5"
        ]
      ,
      
        title: "List 5",
        cards: [
          title: "Card 1",
          title: "Card 2",
          title: "Card 3",
          title: "Card 4",
          title: "Card 5"
        ]
      
    ];
  
(angular))

html, body 
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;


.container 
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  float: column;
  height: 100%;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  padding: 0;
  width: 100%;


.container .container-head 
  background: red;
  padding: 10px;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  flex-grow: 0;


.container .container-head .header-title 
  margin: 0;
  padding: 0;


.container .container-body 
  background: green;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  flex-grow: 1;
  padding: 5px;


.container .container-body .view 
  background: blue;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  float: left;
  overflow-x: auto;
  padding: 0;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  flex-grow: 1;


.container .container-body .view .list-block 
  box-sizing: border-box;
  background: darkblue;
  display: inline-block;
  flex: 0 0 auto;
  float: left;
  margin: 0;
  padding: 5px;
  width: 280px;
  min-height:0;


.container .container-body .view .list-block .list 
  background: darkorange;
  border-radius: 4px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  float: left;
  max-height: 100%;
  margin: 0;
  min-height: 0;
  min-width: 0;
  width: 100%;


.container .container-body .view .list-block .list .list-header 
  background: orange;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 1px solid darkorange;
  -webkit-flex-grow: 0 0 auto;
  -moz-flex-grow: 0 0 auto;
  flex-grow: 0 0 auto;
  float: left;
  height: auto;
  padding: 10px;


.container .container-body .view .list-block .list .list-cards 
  background: orange;
  border-bottom: 1px solid darkorange;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  float: left;
  max-height: 100%;
  overflow-y: auto;
  padding: 5px;


.container .container-body .view .list-block .list .list-cards .card 
  background: #ffc107;
  border-radius: 4px;
  float: left;
  margin: 5px;
  padding: 10px;


.container .container-body .view .list-block .list .list-cards .card:hover 
  background: #fdc002;


.container .container-body .view .list-block .list .list-footer 
  background: orange;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  flex-grow: 0;
  height: auto;
  padding: 10px;
  float: left;
  text-align: center;

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body ng-app="app">
    <div class="flexbox container" ng-controller="AppController as ctrl">
      <div class="container-head">
        <h3 class="header-title">Flexbox</h3>
      </div>
      <div class="container-body">
        <div class="view">
          <div class="list-block" ng-repeat="list in ctrl.lists">
            <div class="list">
              <div class="list-header">list.title</div>
              <div class="list-cards">
                <div class="card" ng-repeat="card in list.cards">
                  card.title
                </div>
              </div>
              <div class="list-footer">
                <a style="cursor: pointer;" ng-click="ctrl.addCard(list)">
                  Add Card
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <script type="text/javascript" src="./script.js"></script>
  </body>

</html>

在 Chrome 上（一切正常）

在 Firefox 上（未正确应用垂直溢出控制）

希望大家能帮帮我。

【问题讨论】：

您是否尝试过修复容器的最大高度？

弹性项目的初始设置是min-height: auto。这意味着弹性项目不能短于其内容的高度。 Chrome 会自动对此进行调整，这就是您的布局在那里工作的原因。 Firefox、Edge 等严格遵守规范。您需要覆盖此默认值以实现跨浏览器兼容性。在溢出的项目上使用min-height: 0。

@Michael_B 非常感谢您的提示。我一直想知道为什么 Firefox 对 flex 的处理在很多情况下都与 Chrome 不同（需要解决方法），但您上面列出的差异似乎是大多数情况的原因！使用标准修复而不是 maxHeight 可以节省大量时间：“calc(100% - margin)”解决方法。

@Venryx，不客气。很高兴我能帮助你。有关更详细的解释，请参阅我的答案底部（“浏览器渲染说明”）：***.com/q/36247140/3597276

嗯，最新版本的 Chrome 似乎也需要 min-height: 0; 修复。有没有其他人注意到这一点，还是我弄错了什么？ （您上面的演示在 Chrome 中不再具有列表内滚动功能，这与您的屏幕截图不再匹配）

【参考方案1】：

只需将 min-height: 0; 放入 .container-body 即可解决您的问题

.container .container-body 
  min-height: 0;

查看more details的这个答案

【讨论】：

老兄，你是救生员。我试图这样做，但不是在 .container-body 中。非常感谢！

就像我想投票 100 次...

这仅适用于 Firefox。对于 IE11 中的相同问题，请使用 min-height: 1px;

嗯，最新版本的 Chrome 似乎也需要 min-height: 0; 修复。有没有其他人注意到这一点，还是我弄错了什么？ （请参阅 Chrome 中的 OP 演示——我不再有列表内滚动）

好的，这个开发者似乎已经在 Chrome 中进行了更改：bugs.chromium.org/p/chromium/issues/detail?id=927066#c39