Flexbox元素不会在Safari中填充父级高度

Question

我有一种情况，我粗略地画了here。我的目标是让所有3＆＃34;蓝色＆＃34; div填充父div的整个高度（以红色显示）。这适用于除Safari之外的所有浏览器。我已经尝试将容器设置在＆＃34; red＆＃34; div为position: relative;和＆＃34; red＆＃34; div为position: absolute;，但无论出于何种原因，它都会彻底弄乱我的页面布局。

<div class="features-image-cards-innerrow flexbox-list" data-type="row">
   <div class="features-image-cards-cardcol">
      <div class="features-image-cards-cardrow">
         <img class="features-image-cards-featimg"> 
         <div class="features-image-cards-cardtextrow" data-type="column">
            <h4 class="">Title 1</h4>
            <p class="">Content 1</p>
         </div>
      </div>
   </div>
   <div class="features-image-cards-cardcol">
      <div class="features-image-cards-cardrow">
         <img class="features-image-cards-featimg"> 
         <div class="features-image-cards-cardtextrow" data-type="column">
            <h4 class="">Title 2</h4>
            <p class="">Content 2</p>
         </div>
      </div>
   </div>
   <div class="features-image-cards-cardcol">
      <div class="features-image-cards-cardrow">
         <img class="features-image-cards-featimg"> 
         <div class="features-image-cards-cardtextrow" data-type="column">
            <h4 class="">Title 3</h4>
            <p class="">Content 3</p>
         </div>
      </div>
   </div>
</div>

div.features-image-cards-innerrow {
    width: 90%;
    max-width: 1232px;
    flex-wrap: nowrap;
}

div.features-image-cards-cardcol {
    width: 33.33333% !important;
    flex-basis: 33.33333% !important;
    float: left !important;
}

div.features-image-cards-cardrow {
    height: 100%;
    display: flex;
    flex-direction: column;
    clear: both;
    float: left;
    width: 100%;
}

img.features-image-cards-featimg {
    flex: none;
    width: 100%;
}

div.features-image-cards-cardtextrow {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}