Firefox의 Flexbox 오버플로 문제

Firefox의 Flexbox 오버플로 문제

이 질문에는 이미 다음과 같은 답변이 있습니다.

유연한 항목이 콘텐츠 크기보다 줄어들지 않는 이유는 무엇입니까? (7개 답변)

콘텐츠가 넘치는 Flexbox 항목은 Chrome에서만 작동함 (1개 답변)

닫힘6년 전에.

플렉스박스를 이용한 테스트 프로젝트가 막히고 있습니다.목표는 내부에 카드 목록이 있는 대시보드를 무한히 넘치는 나란히 구축하는 것입니다.

그럭저럭 그렇게 할 수 있었는데, 문제는 그 목록들은 각각 머리말, 카드 목록, 바닥글이 안에 있고, 목록의 높이는 상위 사용 가능한 높이를 초과할 수 없다는 것입니다.그런 경우에는 카드 목록에 오버플로만 적용해야 합니다.

크롬에서는 잘 작동하지만 파이어폭스에서는...그런 식으로 내용물이 흘러넘칠 가능성에 대해서는 렌더러가 감당할 수 없는 것 같습니다!이거 때문에 정말 화가 나요.

예:

코드 (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>

온 크롬(Everything working)

Firefox에서(수직 오버플로 컨트롤을 올바르게 적용하지 않음)

당신들이 나를 도와줄 수 있기를.

그냥 집어넣어요.min-height: 0;container-body로 보내주시면 문제가 해결됩니다.

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

자세한 내용은 이 답변 참조

언급URL : https://stackoverflow.com/questions/44948158/flexbox-overflow-issue-in-firefox