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

Question

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>
Read More
</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 & restaurants. 2000+ accomodations. It's easy to see why Mallorca is a vacation hotspot.</p>
Read More
</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>
Read More
</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;
}
}

Answer 1

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