问题：

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

侯沈义

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

希望你们能帮我。

共有1个答案

慎弘化

2023-03-14

只需放置min高度：0 到。容器体这将解决您的问题

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

查看此答案了解更多详情

类似资料：

Firefox v36及更高版本中的CSS Flexbox问题[重复]

我试图使用CSS Flexbox（display:flex）占据窗口的剩余高度。我还想滚动可用。。。也许我在这件事上做得不对，但我已经找了这么久，以至于我找不到其他的选择。这个想法是有一个固定的容器。在那个固定的容器内是一个柔性盒子，占据了100%的高度。我将项目添加到堆叠在列中的灵活框中。我添加的最后一个项目（容器包装器）里面有动态内容，它将通过AJAX调用替换超文本标记语言（否则我只会将操作
firefox溢出-y不适用于嵌套的flexbox

问题内容：我已经使用css3 flexbox设计了100％宽度100％高度的布局，该布局可在IE11上使用（如果对IE11的仿真正确，则可能在IE10上使用）。但是Firefox（35.0.1），overflow-y无法正常工作。如您在此Codepen中所见： Firefox无法正确渲染溢出。它显示一个滚动条问题答案： TL;博士：你需要在你的规则。更详细的解释：弹性项根据其子项的固有大
Flexbox-图像溢出

我试图创建一个包含两个项目的flex容器--一个文本div和一个图像div。然而，我在容器中保存映像时遇到了实际的问题。当我将浏览器的大小调整为一个小宽度时，图像就会溢出容器，我似乎不明白为什么会发生这种情况。物品应该留在容器里吗？代码在这里：代码本在这里： http://codepen.io/reskk/pen/aldpbz 我四处寻找并尝试了一些解决方案：使用flex-basis、fle
在Firefox和Chrome 48中使用flexbox出现渲染问题

问题内容：在chrome 47上（正确的行为）：在chrome 47上，div 正确滚动，使用flex调整高度为100％。在Firefox（错误的行为）上：在Firefox上，与div一起使用的是内容高度，并且滚动不正确。跨浏览器解决此问题的方法是什么？已更新问题，以区分Chrome 47和Chrome 48。问题答案：更新了flexbox规范，使flex项目的默认最小大小等于内
结合flexbox无法工作的文本溢出[重复]

我有一个300像素宽的容器，里面有两个弯曲的div 第二个是100px宽，另一个应该占用剩余空间当我在第一个div中放置比剩余200px宽的文本时，它会溢出，我可以使用
Flexbox子项溢出父项

我正在玩flexbox，我的flex项似乎溢出了它的父容器。我能做些什么来确保它能呆在它的范围内？抱歉，它有点长：）但我正试图垂直列出一些控件，我想在一行上订购两个控件<因此，UL以一个灵活的方向（柱）和LI的方向（水平）保存所有内容但是，即使控件嵌套在具有设置宽度的div中，它们仍然在其边缘上运行。有谁能给我一些建议，说明我应该做些什么：）<谢谢！

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

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档