Firefox experiencing trouble handling flexbox overflow

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.

htmlcssangularjsfirefoxflexbox

Answer №1

To resolve the problem, simply add min-height: 0; to the .container-body element.

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

For further information, you can refer to this explanation in this answer

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the menu not appearing in the header section of the HTML/CSS?

Hey there, I'm a new student diving into the world of HTML/CSS. I've been working on creating a page layout, but for some reason my menu links are appearing under the header section instead of within it. I'm a bit confused and could really u ...

htmlcsscss-selectors

"Learn the steps to toggle a sub menu using an onclick event and how to hide it using another

I created a sidebar navigation that displays submenus on mouseover, but I want them to open on click and close when clicking on the same tab. Please take a look at my code on this CodePen link. Thank you. <nav class="navigation"> <ul class="mai ...

javascripthtmlcss

highlight the selected option in the ng-repeat list of items

Looking for some assistance with a coding problem I'm having. I keep running into an error when trying to make a selected item in an ng-repeat list highlight. The CSS style is only applied on the second click, not the first. Additionally, I need to en ...

javascripthtmlcssangularjs

Having Trouble with Cascading Style Sheets (CSS) for Docked Menu

Click here for the code snippet It seems like everything should be functioning correctly... right? The CSS provided in the sample is pretty straightforward: command,a {float:left;border:1px solid blue;} And the HTML code is just as simple: <menu> ...

htmlcss

Attempting to sort through an array by leveraging VueJS and displaying solely the outcomes

Within a JSON file, I have an array of cars containing information such as model, year, brand, image, and description. When the page is loaded, this array populates using a v-for directive. Now, I'm exploring ways to enable users to filter these cars ...

javascripthtmlarraysvue.js

Turn off the scroll function while loading a webpage

Here is the script for my preloader: $(window).load(function() { $("#loading").fadeOut(1000); I want to prevent scrolling while the "loading" is still visible, and then enable it again after the fade out completes. ...

javascriptjqueryhtmlscrollpreloader

Is there a way to deactivate the previous button for today's date?

I need assistance with disabling the previous button on today's date in my calendar. It is crucial that users are only able to select the start date from today onwards. I am currently utilizing moment.js for my Datepicker. Any help would be greatly ap ...

javascripthtmljson

Chrome geolocation feature does not display the permission popup for JavaScript

After the latest Chrome update, we have noticed that the popup to Allow/Block accessing a user's location from a website is no longer appearing. We tested this on Edge, Firefox, and different mobile devices, where it seems to be working fine. Current ...

javascripthtmlgoogle-chromegeolocation

Position an element to the right inside its parent container with varying width in Internet Explorer 7 or earlier

I am trying to align a button to the right edge of a table inside a container-div that has no set width. The goal is to have the button float on the right side of the table, lining up with its right edge. While my current approach works in most browsers, i ...

htmlcss

Specifying file types in an HTML upload form

Is there a way to restrict my form so that it only allows jpeg files? Currently, it is displaying all types of files. <input name="image" type="file" /> Also, are there any JavaScript functions available for showing progress? ...

htmluploadinputprogressfile-type

Ensure that two elements containing content of varying width are equal in width

I am facing a challenge with a container that contains two child elements (previous and next links). These links have labels of different lengths, but I need them both to have the same width on the page. Ideally, each link should be as wide as the widest e ...

htmlcss

Navigating to a specific state within a custom directive: A comprehensive guide

I've been experimenting with writing custom directives and encountered a challenge. I'm working on creating an ANCHOR BUTTON directive where I can set values for ICON, TEXT, and STATE(UI-SREF). HTML template <v-anc-btn-get state="profile( ...

angularjsangularjs-directive

Distinguish using section class in Selenium

Currently grappling with a Python selenium issue, I need to extract and print an email address in my code: [email protected] Just looking for a hint... HTML: <section tabindex="-1" class="pv-profile-section pv-contact-info artdeco- ...

pythonhtmlselenium-webdriverweb

No matter what I try, the design of my dialog box remains stubbornly unchanged

I am attempting to increase the width of my dialog box while also adding horizontal middle borders. It seems that my bootstrap for the site does not include these elements. How can I rectify this issue? Here is my code: $(document).ready(function() { ...

javascriptjqueryhtml

What methods can I employ to utilize the name attribute for POST requests instead of the ID attribute in TinyMCE?

My inline TinyMCE form sends content to qry.php with the key "edit_me". I prefer the default behavior of sending content using the name attribute instead. <script type="text/javascript"> tinymce.init({ selector: '#edit_me', ...

phpjqueryhtmlajaxtinymce

What could be causing the CSS and HTML connection to fail?

I am currently working with Flask on the Atom editor to build a website. Despite specifying the correct path for the CSS file in the link, every time I load the page, it appears without any styling. I have attempted changing the paths multiple times with n ...

pythonhtmlcssflaskatom-editor

Transforming the output of a PHP script from an HTML table into an ion-list format tailored for the Ionic framework

Currently I am working on an application built with the Ionic framework. I have developed a PHP file to retrieve 'Users' data from my database and it is currently being displayed in an HTML table format. In the services section of the framework, ...

javascriptjqueryangularjsajaxionic-framework

UI.Bootstrap - incorrect formatting of text

I am facing an issue with my code where, when I add a string containing HTML code, it does not display in the correct HTML format. Below is a snippet from my code: vm_main.test = "Documents" + "internet site <b><a href='http://www.g ...

angularjsbootstrap-modalui.bootstrap

Experiencing difficulty moving information from React form to DATA.txt file through Express

I've tried various things, but I keep encountering the same error. Changing the file path didn't seem to make a difference. The current structure of my project is as follows: {nodemodules,public,scr (containing all files including App.jsx),DATA. ...

javascripthtmlreactjsnode.jsexpress

As the screen size shrinks, two components merge together

One issue I'm facing with my site is the component called NavPanel. This consists of two components - a back button (BackToButton) and a search field (SearchTextField). Everything looks fine on a standard screen size, but when the screen size decrease ...

cssreactjsmaterial-uigrid