Flexbox elements won't fill parent height in Safari

Question

I have a situation that I have very crudely drawn here. My goal is to make all of the 3 "blue" divs fill the entire height of the parent div (shown in red). This works in every browser except for Safari. I have already tried setting the container above the "red" div to position: relative; and the "red" div to position: absolute;, but for whatever reason it completely messes up the layout of my page.

<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%;
}