The issue with Bootstrap 4 Card Flex Width not functioning properly seems to be unique to Firefox

I'm currently facing an issue while creating a webpage using Bootstrap 4 and flex. I have Bootstrap cards with specific widths, and it seems to work perfectly fine in Google Chrome and Opera but not in Firefox. Here's the code snippet:

    <div class="row auxAltura2">
    <div class="col">
        <div class="card">
            <div class="card-header colorPlataforma">
                Tags
            </div>
            <div id="moduloTags" class="card-body">
                ...

            </div>

        </div>
    </div>
    </div>

Below is the CSS code snippet:

   .auxAltura2{height:250px}
    .card-header{
        display: flex;
        flex: 1 0 30px;
        align-items: center;
        font-size:17px;
    }

Firefox displaying the card image:

https://i.sstatic.net/rdHF3.png

Opera showing the card image:

https://i.sstatic.net/MNg89.png

There's clearly a difference between the two browsers. Is this a bug? Any assistance on this matter would be greatly appreciated. Thank you for your help.

htmlcssfirefoxflexboxbootstrap-4

Answer №1

The issue lies with the padding on the flex element, which is causing an additional 30px to be added to the height of your .card-header.

To resolve this, it is recommended to set the top and bottom padding of .card-header to 0;

For more information, you can refer to this question on Stack Overflow: How to get flexbox to include padding in calculations?

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

I was able to resolve the fixed position issue of a button on Safari for iPhone 3G

Here is the setup I have on jsfiddle: http://jsfiddle.net/zZDqH/ Currently, there is a button fixed at bottom:0px. You can scroll up and down the page, and the button will stay at the bottom of the page. However, when testing in Safari on an iPhone 3G ( ...

iphonehtmlcsssafari

The printout of the webpage is not aligning properly on an A4 page

Currently, I have been utilizing the JavaScript function window.print() to print a webpage that contains a header and footer. The height of this webpage is dynamic, as it is dependent on the content of an HTML table within the page. However, I have encou ...

javascripthtmlcssprinting

Spooky results displayed on website from NightmareJS

Is there a way to display the output from nightmareJS onto a webpage when a button is clicked using HTML, CSS, and JS? This is my nightmareJS code: var Nightmare = require('nightmare'); var nightmare = Nightmare({ show: false}) nightmare .go ...

javascripthtmlcssnightmare

JS selection-dropbox

As someone who is relatively new to JS, I am struggling a bit. The goal of the code is to display items with specific content (ALL, A, B, C). While the code works fine with buttons, I can't seem to get it to work with a 'Dropdown-select', ...

javascripthtmldropdown

Struggling to input information from a web form into a MySQL database using PHP

I'm currently facing an issue with my form not being able to submit data to the MySQL database. Strangely, I'm not receiving any error messages that could help me identify the root of the problem. I experimented by changing the action method to G ...

phphtmlmysqlwamp

Utilizing pure JavaScript to dynamically fetch HTML and JavaScript content via AJAX, unfortunately, results in the JavaScript

I am trying to load an HTML file using AJAX and then execute a script. Here is the content of the HTML file I want to load: <div class="panel panel-body"> <h4>Personal Data</h4> <hr /> <span data-bind="editable: firs ...

javascripthtmlajaxknockout.js

Having trouble with an onClick function not working on a .php webpage?

I recently developed a simple JavaScript script that dynamically loads an image based on user input in a text field (e.g., entering 'brick1' loads brick1.jpg). Although this works fine on a regular HTML page, I faced issues triggering the onClick ...

javascriptphpjqueryhtml

What is the best way to create a sliding menu that appears from the right side on a mobile device using HTML, CSS, and JQuery

Is there a way to have the menu slide in smoothly from the right side after clicking on the menu bar icon, including sliding the menu bar icon itself? The current code displays the menu directly upon clicking on the menu bar, but I would like it to slide i ...

javascriptjqueryhtmlcssmenu

Creating horizontal card overflow with arrow navigation in Bootstrap 4.5: A step-by-step guide

Using Bootstrap, I've created a snippet that generates an overflow card that can be scrolled horizontally. <div class="container"> {{-- If you look to others for fulfillment, you will never truly be fulfilled. --}} <h4 class="mb- ...

phphtmlcsslaravelbootstrap-4

The Bootstrap navigation bar is refusing to collapse

Whenever I resize the screen, the navbar items do not collapse into the toggle menu, instead, they are just stacked below the navbar brand. Any thoughts on why this might be happening? <nav class="navbar navbar-light navbar-expand-md"> ...

htmlbootstrap-5

Ways to enhance the legibility and visibility of the text

On my website, there's an image that appears as follows: https://i.sstatic.net/bCE3k.png I attempted to add a shadow to the text, resulting in this look: https://i.sstatic.net/4ha0J.png However, the shadow seems out of place. Any ideas on how I c ...

htmlcsstextbackgroundphoto

Uploading files with Angular and NodeJS

I am attempting to achieve the following: When a client submits a form, they include their CV AngularJS sends all the form data (including CV) to the Node server Node then saves the CV on the server However, I am encountering difficulties with this proc ...

javascripthtmlangularjsnode.jsfile-upload

Collapsing borders in JavaFX 8

Hey there! I'm having a little issue with JavaFX 8 components. I'm trying to make them sit next to each other with borders, but it's not quite working out. Is there a way to make them blend together and share one border? import javafx.geome ...

javacssuser-interfacejavafx

Concatenate a variable to the conclusion of a string using PHP

Currently, I am trying to include the id of the logged-in user in a table name. For instance, I would like to have a table named Rating_User_1 where 1 corresponds to the id of the user who is currently logged in. I have stored the user's id in a varia ...

phphtmllaravel

Pass the ID to a PHP script to retrieve the image source tag from the database based on the file

I am facing a challenge that I thought would be simple, but despite my efforts to research and experiment, I can't seem to get it right. I have a database that stores image file names, and I need to retrieve the file name based on the ID specified in ...

phphtml

I'm looking to add CSS transitions, like fade-ins, to a list of items in React in a way that the animations occur one after the other upon rendering. How can this be achieved?

I've scoured the depths of Stack Overflow and combed through countless pages on the internet in search of an answer to my query, but alas, I have not found a solution. So, my apologies if this question is a duplicate. Here's my conundrum: https ...

javascriptcssreactjscss-animationscss-transitions

Why does jQuery's each function struggle to retrieve the width of hidden elements?

Why is it difficult to obtain the width of hidden elements? Here is my code: .hidden { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <ul class="navbar-items"> <li> ...

javascriptjquerycsseachouterwidth

Ways to verify if options have been chosen or not?

if(isset($_POST["marketing"])){ foreach($_POST as $key => $value){ if(strlen($value)<1) continue; echo "<option value='".$value."' selected >".$value."</option>"; } I have a PHP script that dynamically cre ...

phphtml

Select the picture to update the content of the text box

Seeking advice and guidance on a project. I have a variety of color icons and I want to set it up so that when someone clicks on a color icon, the name of the color is inserted into a hidden text field. The code for my hidden text field is as follows: &l ...

javascriptjqueryhtml

Shifting a static-width table within a predetermined width container

Unable to modify the HTML code for this project, I am in need of a CSS-only solution. Dealing with an unpleasant HTML structure that is causing some issues. A side by side comparison on fiddle shows where I'm currently at in the process. The challeng ...

htmlcss