web-dev-qa-db-ja.com

Flexbox Firefoxでのオーバーフローの問題

フレックスボックスを使用したテストプロジェクトで立ち往生しています。目標は、カードのリストをいくつか並べてダッシュボードを構築し、無限にオーバーフローすることです。

問題は、それらのリストにはそれぞれヘッダー、カードリスト、フッターがあり、リストの高さは親の利用可能な高さを超えることはできないということです。その場合、リストはカードリストにオーバーフローのみを適用する必要があります。

On 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="[email protected]" 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で（すべて正常に動作しています） On Chrome works!

Firefoxで（垂直オーバーフロー制御を正しく適用しません） enter image description here

皆さんが私を助けてくれることを願っています。

htmlcssangularjsfirefoxflexbox
18
Kaciano Ghelere

ただmin-height: 0; to .container-bodyこれにより問題が修正されます

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

詳細 については、この回答を参照してください

45
Ismail Farooq