Different sized flex-containers when not at full-sized browser

My 3 containers at 900px and below is fine, at this width is uses rule for 900px which is flex-direction:column , so no issued there. At my full-sized browser (1366px) the containers are also the same height / width. Anywhere between 920-1055px wide (and wider, JSfiddle can only go that wide on my monitor), the containers are not the same height / width. How can I make the containers that have less content (in this case characters) stay the same size as the other containers when resizing between the current faulty width?

JSFiddle

    <div class="ix-cards">
        <div class="ix-services">
            <div class="ix-cardscontent ix-c-content1">
                <div class="fas fa-umbrella-beach"></div>
                <h2>Holiday Rentals</h2>
                <p>See our selection of Private Apartments and Villas for Rent in Cala Bona, Cala Millor, Cala Ratjada and Cala Anguila.</p>
                <a href="Holiday-Rentals.html">Read More</a>
            </div>   
            <div class="ix-cardscontent ix-c-content2">
                <div class="fas fa-globe-europe"></div>
                <h2>Discover</h2>
                <p>300+ sunny days a year. 4000+ bars &amp; restaurants. 2000+ accomodations. It's easy to see why Mallorca is a vacation hotspot.</p>
                <a href="#">Read More</a>
            </div>
            <div class="ix-cardscontent ix-c-content3">
                <div class="fas fa-building"></div>
                <h2>Properties For Sale</h2>
                <p>Looking to sieze your own piece of heaven on the island? Look no further, we have what you're looking for, at a click of a button.</p>
                <a href="#">Read More</a>
            </div>    
        </div>
    </div>

    .ix-cards{
max-width:1300px;
margin:0 auto;
text-align:center;
padding:30px;
    }

    .ix-services{
display:flex;
align-items:center;
    }

    .ix-cardscontent{
display:flex;
flex-wrap:wrap;
flex:1;
margin:20px;
padding:20px;
border:2px solid black;
border-radius:4px;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 1);
transition: all 0.9s ease;
    }

    .ix-cardscontent .fab{
font-size:70px;
margin:16px 0;
    }

    .ix-cardscontent .fas{
font-size:70px;
margin:16px 0;
    }

    .ix-cardscontent > *{
flex: 1 1 100%;
    }

    .ix-cardscontent:hover{
color:white;
    }

    .ix-cardscontent:hover a{
border-color:white;
background:white;
color:black;
    }

    .ix-c-content1:hover{
border-color:#50C878;
background:#50C878;
transform:scale(1.1)
    }

    .ix-c-content2:hover{
border-color:#FFC30B;
background:#FFC30B;
transform:scale(1.1)
    }

    .ix-c-content3:hover{
border-color:#DE3163;
background:#DE3163;
transform:scale(1.1)
    }

    .ix-cardscontent h2{
font-size:30px;
margin:16px 0;
letter-spacing:1px;
    }

    .ix-cardscontent p{
font-size:17px;
    }

    .ix-cardscontent a{
margin:22px;
background:black;
color:white;
text-decoration:none;
border:1px solid black;
padding:15px 0;
border-radius:25px;
transition:.9s ease;
    }

    .ix-cardscontent a:hover{
border-radius:4px;
    }

    @media (max-width:900px){
.ix-services{
    display:flex;
    flex-direction:column;
}
    }

As s.kuznetsov has said above in the comments section, removing align-items: center from .ix-services has worked perfectly.