bootstrap cards in col not takiing the height of the row in safari

I have a bootstrap / angular project. In every browser the cards have the height of the row / col. i have even set it to 100%, but in safari it is not working correctly. In firefox, chrome and edge its fine.

Can sombody help me?

Code

parent:

home-page.html

<div class="position-relative padding-top-2rem card-container">
  <div class="container">
    <!-- title -->
    <h4 class="text-align-center boldLucas">
      {{'product-page.title.useTheMostInnovativeOSWithNetworkConnectivity' | translate}}
    </h4>
    <!-- cards -->
    <div class="row row-cols-sm-1 row-cols-md-2 row-cols-xl-{{cardElements.length}} g-3 py-5">
      <app-card-content *ngFor="let cardElement of cardElements" [cardElement]="cardElement"></app-card-content>
    </div>
  </div>
</div>

home-page.css

.card-container {
  background-color: #0A0D2F !important;
}

child:

card-component.html

<div class="col card-box-schaddow" id="card-box-schaddow-{{cardElement.icon}}">
  <a role="button" class="card btn" [href]="'#'+cardElement.id">
    <div class="card-body">
      <img class="row-box-icon"
           src="../../../assets/fonts/icons/{{cardElement.icon}}.svg"
           alt="Icon not found"/>
      <h4 class="bold card-title text-align-center">
        {{cardElement.title | translate}}<span class="bi-chevron-right bold"></span>
      </h4>
      <p class="card-text text-align-center py-2" [innerHtml]="cardElement.text | translate"></p>
    </div>
  </a>
</div>

card-component.css

/* classes */
.row-box-icon {
  width: auto;
  margin-bottom: 5%;
}

.card, .card:hover {
  height: 100% !important;
  border-radius: 9px;
  background-color: rgba(14, 44, 103, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.card-box-schaddow {
  border-radius: 50%;
}

.card-text {
  font-size: 1rem;
}

.card-title {
  padding-top: 1rem;
}

chrome, firefox, edge:
enter image description here

safari:
enter image description here

I tried:

.card, .card:hover {
  height: 100% !important;
  // ...
}

.card, .card:hover {
  min-height: 100% !important;
  // ...
}

.card, .card:hover {
  height: 100% !important;
  min-height: 100% !important;
  // ...
}

etc. but i cannot find the solution..

For your solution try to read that explanation on stackoverflow.

https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent

i found the answer! it's

home-page.css
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

app-card-content {
  display: grid !important;
}

<!-- end snippet -->

safari
enter image description here