Having some trouble with a test project that involves using flexbox. The task at hand is to create a dashboard with multiple lists of cards arranged side-by-side with infinite overflow.
I was able to achieve this layout, however, the issue arises when each list contains a header, a card list, and a footer inside it, and the total height of the lists cannot exceed the available height of the parent container. If it does, only the card list should show overflow.
Everything looks fine in Chrome, but Firefox seems to struggle with handling the overflowing content properly. It's quite frustrating!
For reference, here is an example:
The code (also available on Plunker)
// Custom Code Here...
(function (angular) {
// Angular module declaration
}(angular))CSS Styling Here...HTML Structure Here...
In Chrome (Works perfectly) https://i.stack.imgur.com/YnpWG.png
In Firefox (Vertical overflow control not working) https://i.stack.imgur.com/7PXkM.png
Any help or suggestions would be greatly appreciated.