Bootstrap 4 Card Flex Width is not working correctly on Firefox

Question

I have a problem trying to make a webpage with bootstrap 4 and flex. I am using Bootstrap cards with certain width. I see that this works fine in Google Chrome and Opera but appears to not work in Firefox. Here is my code:

    <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>

And now here is my css:

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

Image card on firefox:

And this is image from card on Opera:

You can see the difference between the 2 browsers. Is a bug? Glad if you can help me. Thanks for all.

use bootstrap 4 flex `
` instead use your css:https://getbootstrap.com/docs/4.0/utilities/flex/ — לבני מלכה, Dec 13 '18 at 08:52
see support flex in firefox:https://developer.mozilla.org/en-US/docs/Web/CSS/flex — לבני מלכה, Dec 13 '18 at 08:54
@לבנימלכה That doesnt work for me. If you see [link](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) you can see that width in Firefox is different than Google Chrome. — Roberto García, Dec 13 '18 at 09:04

score 2 · Accepted Answer · answered Dec 13 '18 at 09:17

2

Problem is padding on flex element, which is added extra to your 30px .card-header height.

You should set the top and bottom padding of .card-header to 0;

See this SO question for more details: How to get flexbox to include padding in calculations?

answered Dec 13 '18 at 09:17

James Wrcsti

220
1
8

1

My sorry, now I understand you. I put padding-top and bottom to 0 and now it works. Nice answer, thanks. – Roberto García Dec 13 '18 at 09:25

Bootstrap 4 Card Flex Width is not working correctly on Firefox

1 Answers1