cssfirefox

How to keep the inner of the cards the same length in Mozilla Firefox?

To keep the inner of the cards the same length I am using CSS height:100% and display:table. In CHROME and EDGE it works OK. But it does not work in Mozilla Firefox. The inner pulls out of its parent.

More details in this yt video https://youtu.be/6uO-9UNGXFw

Here is my code https://codepen.io/Dvorakova/pen/yLOjqeP

.card>div {
    height: 100%;
    display: table;
}

Thank you for your help.

Solution

    1. Remove the rule of height: 100% from the .card > div

    2. Remove the rule of display: table from the .card > div

    3. Add diplay property of 'flex' or 'grid' to your .card CSS class.

      .card > div {
     padding: 2rem;
     background-color: rgba(255,255,255,.5);
     box-shadow: 0 0 2rem rgba(0,0,0,.1);
     border-radius: 1.5rem;
     text-align: center;
 }
 .card {
     background: #f55053;
     background: linear-gradient(45deg,#f55053 0,#f9a18a 100%);
     border-radius: .75rem;
     padding: .75rem;
     transition: all .3s ease;
     display: flex;
 }