Flexbox overflow issue in Firefox [duplicate]

Question

I'm getting stuck on a test project using flexbox. The goal is to build a dashboard with some lists of cards inside, side-by-side with infinite overflowing.

I managed to do just that, the problem is: each one those lists have a header, a card list and a footer inside, and the lists height can't exceed the parent available height. If that happen, the list must only apply overflow on the card list.

On chrome it works just fine, but on firefox... It seems the renderer can't handle the possibility of the content overflowing that way! I'm getting really mad with this one.

Example:

The code (also on 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>

On Chrome (Everything working)

On Firefox (Doesn't apply the vertical overflow control correctly)

Hope you guys can help me out.

Answer 1

Just put min-height: 0; to .container-body this will fix your issue

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

See this answer for more details