iPad's with flex - Height - ios

Question

Basically I have got a row with 3 columns, and the columns haves an image and text.
In chrome, Android, Fire-Fox, I managed to get each column the height of the parent, and then put the text in the middle if any other column is bigger. But in iPad with iOS 8.3 and 9.3.5, doesn't makes the columns big at 100% of the height.
The codepen is: https://codepen.io/rocketraccoon/pen/PEopPO
And here I leave the Snippet:
body {
background-color: red !important; /* Only for trying to see the visual effect required */
}
.triple-opcion {
padding: 40px;
}
.triple-opcion .opciones .opcion {
background-color: #FFFFFF;
text-align: center;
padding: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
min-height: 100%;
}
.triple-opcion .opciones .opcion:hover,
.triple-opcion .opciones .opcion:focus,
.triple-opcion .opciones .opcion:active {
text-decoration: none;
}
.triple-opcion .opciones .opcion .t5 {
text-transform: uppercase;
color: #191D22;
margin: auto;
max-width: 100%;
}
.triple-opcion .opciones .opcion img {
width: 64px;
margin-bottom: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="triple-opcion ayuda">
<div class="row opciones opciones-ayuda">
<div class="col-4">
<a href="#>
<div class="opcion">
<img src="http://via.placeholder.com/300" alt="">
<p class="t5">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</p>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="opcion">
<img src="http://via.placeholder.com/300" alt="">
<p class="t5">24 months</p>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="opcion">
<img src="http://via.placeholder.com/300" alt="">
<p class="t5">48 months</p>
</div>
</a>
</div>
</div>
</div>
Any help you can provide will be helpful.

Answer 1

Here is a solution using a table. I also took the opportunity to optimize your code. You should not be using block elements, eg divs inside anchor tags.
HTML:
<div class="triple-opcion ayuda">
<div class="row opciones opciones-ayuda">
<div class="col-12 col-md-4 opcion">
<a class="inner">
<img src="http://via.placeholder.com/300" alt="Buscador de números">
<span class="t5">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500
</span>
</a>
</div>
<div class="col-12 col-md-4 opcion">
<a class="inner">
<img src="http://via.placeholder.com/300" alt="Preguntas frecuentes">
<span class="t5">24 months</span>
</a>
</div>
<div class="col-12 col-md-4 opcion">
<a class="inner">
<img src="http://via.placeholder.com/300" alt="Sugerencias">
<span class="t5">48 months</span>
</a>
</div>
</div>
</div>
SCSS:
body {
background-color: red;
}
.triple-opcion {
.opciones {
display:table;
table-layout:fixed;
width:100%;
border-spacing: 40px;
border-collapse: separate;
.opcion {
text-align: center;
padding: 40px;
display: table-cell;
height: 100%;
background:#fff;
vertical-align:middle;
span {
display:block;
}
&:hover,
&:focus,
&:active {
text-decoration: none;
}
img {
width: 64px;
}
.t5 {
text-align: center;
margin: auto;
max-width: 100%;
}
}
}
}
Here is a working pen - https://codepen.io/scooterlord/pen/NXWmQJ
It's too late and I am writing from my couch so I didn't test it on my iPad, but am fairly certain it works.
Edit 2: I just realized what was requested, the initial description of the issue was not very clear. Here is a new codepen with what is requested:
https://codepen.io/scooterlord/pen/eymprK